> ## 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.

# Bar

> Add a bar series to a [combo_chart](/components/combo_chart)

```liquid theme={null}
{% combo_chart data="demo.daily_orders" x="date" date_grain="month" %}
    {% bar y="sum(total_sales)" /%}
{% /combo_chart %}
```

## Examples

### Basic Bar Series

```liquid theme={null}
{% combo_chart data="demo.daily_orders" x="date" date_grain="month" %}
    {% bar y="sum(total_sales)" /%}
{% /combo_chart %}
```

### Unstacked Bars

```liquid theme={null}
{% combo_chart data="demo.daily_orders" x="date" date_grain="month" %}
    {% bar y="sum(total_sales)" series="category" stacked=false /%}
{% /combo_chart %}
```

### Multiple Stacks

```liquid theme={null}
{% combo_chart data="demo.daily_orders" x="date" date_grain="month" %}
    {% bar y="sum(total_sales)" stack_id="sales" /%}
    {% bar y="sum(total_sales)+1000000" stack_id="sales" /%}
    {% bar y="sum(quantity)" stack_id="quantity" /%}
{% /combo_chart %}
```

### Extra tooltip fields

```liquid theme={null}
<!-- tooltip_fields adds extra rows to this series' tooltip on hover, using the same GROUP BY / filters / date range as the primary y. color_by_sign paints positives green and negatives red; down_is_good flips that mapping. -->
{% combo_chart data="demo.daily_orders" x="date" date_grain="month" %}
    {% bar
        y="sum(total_sales)"
        fmt="usd"
        tooltip_fields=[
            { value="count(distinct order_id)", label="Orders" },
            { value="sum(total_sales) - lag(sum(total_sales)) over (order by date_trunc('month', date))", label="MoM Δ", fmt="usd", color_by_sign=true }
        ]
    /%}
{% /combo_chart %}
```

## Attributes

<ResponseField name="y" type="string" required>
  Column name for y-axis
</ResponseField>

<ResponseField name="series" type="string">
  Column name for series grouping
</ResponseField>

<ResponseField name="axis" type="string" default="y1">
  The axis to render the series on

  **Allowed values:**

  * `y1`
  * `y2`
</ResponseField>

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

<ResponseField name="tooltip_fields" type="array">
  Extra columns to include in the tooltip on hover. Each entry is `{ value, label?, fmt?, color_by_sign?, down_is_good? }`. See the [tooltip fields guide](/components/tooltip-fields) for examples.
</ResponseField>

<ResponseField name="data_labels" type="options group">
  Label each point in the series with its value

  **Example:**

  ```
  data_labels={
    position = "above"
    fmt = "date"
    size = 0
    distance = 0
    rotate = 0
    color = "string"
    border_color = "string"
    show_overlap = true
  }
  ```

  **Attributes:**

  * position: `string` - Position the label relative to its data point
    * **Allowed values:**
      * `above`
      * `below`
      * `left`
      * `right`
      * `middle`
  * fmt: `string` - Format the label value. Defaults to series or axis fmt.
    * **Allowed values:** See [Value Formatting](/core-concepts/value-formatting) for all available formats.
  * size: `number` - Font size in px
  * distance: `number` - How far the label is from the data point
  * rotate: `number` - Rotate each label (degrees)
  * color: `string` - Change the text color of the labels
  * border\_color: `string` - Change the border color surrounding text labels, defaults to chart background
  * show\_overlap: `boolean` - Show labels for every point even when they overlap
</ResponseField>

<ResponseField name="options" type="options group">
  **Attributes:**

  * color: `string`
  * opacity: `number` - Between 0 and 1
</ResponseField>

<ResponseField name="echarts_options" type="map">
  Raw [ECharts series options](https://echarts.apache.org/en/option.html#series) deep-merged into this series only. For overrides that apply to every series on the chart, set `echarts_series_options` on the parent chart instead.

  **Example:**

  ```
  echarts_options={
      endLabel={ show=true }
      markPoint={ data=[{ type="max" } { type="min" }] }
  }
  ```
</ResponseField>

<ResponseField name="stacked" type="boolean | string" default="true">
  Whether to stack bars with the same series value. Set to "100%" for percentage stacking.
</ResponseField>

<ResponseField name="stack_id" type="string">
  Stack identifier - bars with the same stack\_id value will be stacked together. Overrides the stacked prop.
</ResponseField>

## Allowed Parents

* [combo\_chart](/components/combo_chart)