> ## Documentation Index
> Fetch the complete documentation index at: https://docs.evidence.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# Progress Bars

> Display progress bars showing a numerator/denominator ratio per category

```liquid theme={null}
{% progress_bars
  data="staff"
  dimension="provider_type"
  numerator="count(*) FILTER (WHERE on_shift = true)"
  denominator="count(*)"
  title="Provider Staffing"
/%}
```

## Examples

### Basic Usage

```liquid theme={null}
{% progress_bars
  data="staff"
  dimension="provider_type"
  numerator="count(*) FILTER (WHERE on_shift = true)"
  denominator="count(*)"
  title="Provider Staffing"
/%}
```

## Attributes

<ResponseField name="data" type="string" required>
  Table or view to query
</ResponseField>

<ResponseField name="dimension" type="string" required>
  Column for row labels (e.g., provider\_type)
</ResponseField>

<ResponseField name="numerator" type="string" required>
  SQL aggregation for the filled portion (e.g., count(\*) FILTER (WHERE active))
</ResponseField>

<ResponseField name="denominator" type="string" required>
  SQL aggregation for the total (e.g., count(\*))
</ResponseField>

<ResponseField name="fmt" type="string">
  Format code for numerator and denominator values. See [Value Formatting](/core-concepts/value-formatting) for available formats.
</ResponseField>

<ResponseField name="title" type="string">
  Component title
</ResponseField>

<ResponseField name="colors" type="array">
  Two-color array defining the gradient for bars and badges, e.g. \["#ef4444", "#22c55e"]. First color maps to 0%, second to 100%.
</ResponseField>

<ResponseField name="thresholds" type="array">
  Two percentage thresholds (0-1) creating 3 color zones: red below first, amber between, green above second. e.g. \[0.5, 0.8].
</ResponseField>

<ResponseField name="lower_is_better" type="boolean">
  If true, low percentages are green and high percentages are red. Default (false) means high percentages are green. Only applies when thresholds are set.
</ResponseField>

<ResponseField name="filters" type="array">
  IDs of filters to apply to the query
</ResponseField>

<ResponseField name="where" type="string">
  Custom SQL WHERE condition to apply to the query. For date filters, use date\_range instead.
</ResponseField>

<ResponseField name="having" type="string">
  Custom SQL HAVING condition to apply to the query after GROUP BY
</ResponseField>

<ResponseField name="limit" type="number">
  Maximum number of rows to return from the query. Note: When used with tables, limit will disable subtotals to prevent incomplete subtotal rows.
</ResponseField>

<ResponseField name="order" type="string">
  Column name(s) with optional direction (e.g. "column\_name", "column\_name desc")
</ResponseField>

<ResponseField name="qualify" type="string">
  Custom SQL QUALIFY condition to filter windowed results
</ResponseField>

<ResponseField name="width" type="number">
  Set the width of this component (in percent) relative to the page width
</ResponseField>