Skip to main content
{% combo_chart data="demo.daily_orders" x="date" date_grain="month" %}
    {% bar y="sum(total_sales)" /%}
{% /combo_chart %}

​
Examples

​
Basic Bar Series

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

​
Unstacked Bars

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

​
Multiple Stacks

{% 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

<!-- 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

​
y
string
required
Column name for y-axis
​
series
string
Column name for series grouping
​
axis
string
default:"y1"
The axis to render the series onAllowed values:
  • y1
  • y2
​
fmt
string
Format for this series’ values. See Value Formatting for available formats.
​
tooltip_fields
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 for examples.
​
data_labels
options group
Label each point in the series with its valueExample:
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.
  • 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
​
options
options group
Attributes:
  • color: string
  • opacity: number - Between 0 and 1
​
echarts_options
map
Raw ECharts series options 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" }] }
}
​
stacked
boolean | string
default:"true"
Whether to stack bars with the same series value. Set to “100%” for percentage stacking.
​
stack_id
string
Stack identifier - bars with the same stack_id value will be stacked together. Overrides the stacked prop.

​
Allowed Parents