Skip to main content
Basic Usage 
{% bar_chart
	data="demo_daily_orders"
	x="category"
	y="sum(total_sales)"
/%}

​
Examples

​
Basic Usage

Basic Usage 
{% bar_chart
	data="demo_daily_orders"
	x="category"
	y="sum(total_sales)"
/%}

​
Bar Chart with Date Grain

Bar Chart with Date Grain 
{% bar_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
/%}

​
Sorting by Value

Sorting by Value 
{% bar_chart
    data="demo_daily_orders"
    x="category"
    y="sum(total_sales)"
    order="sum(total_sales) desc"
/%}

​
Custom Category Order

{% bar_chart
    data="demo_daily_orders"
    x="category"
    y="sum(total_sales)"
    x_sort=["Clothing", "Home", "Sports", "Electronics"]
/%}

​
Bar Chart with Series Colors

{% bar_chart
    data="demo_daily_orders"
    x="category"
    y="sum(total_sales)"
    series="case when sum(total_sales) > 7000 then '>$7k' when sum(total_sales) > 3500 then '>$3.5k' else '<$3.5k' end"
    title="Sales by Category and Performance"
    chart_options={
        series_colors={
            ">$7k"="#22c55e"
            ">$3.5k"="#f59e0b"
            "<$3.5k"="#ef4444"
        }
    }
/%}

​
100% Stacked Bar Chart

{% bar_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    series="category"
    stacked="100%"
    date_grain="month"
    title="Sales Distribution by Category"
/%}

​
Revenue by Day of Week

{% bar_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="day of week"
    title="Revenue by Day of Week"
    subtitle="Weekday vs weekend sales patterns"
/%}

​
Seasonality Analysis (Month of Year)

{% bar_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="month of year"
    title="Seasonality Analysis"
    subtitle="Sales patterns across months"
/%}

{% bar_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="quarter of year"
    title="Quarterly Performance"
    subtitle="Q1 through Q4 comparison"
/%}

​
Monthly Billing Cycle Patterns

{% bar_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="day of month"
    title="Daily Revenue by Day of Month"
    subtitle="Identify billing cycle patterns"
/%}

​
Week Number Analysis

{% bar_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="week of year"
    title="Revenue by Week of Year"
    subtitle="Weekly performance across the year"
/%}

​
Day of Year Analysis

{% bar_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="day of year"
    title="Revenue by Day of Year"
    subtitle="Identify patterns across 365 days"
/%}

​
Attributes

​
data
string
required
Name of the table to query
​
filters
array
IDs of filters to apply to the query
​
date_range
options group
Use date_range to filter data for specific time periods. Accepts predefined ranges (e.g., “last 12 months”), dynamic ranges (e.g., “Last 90 days”), custom date ranges (e.g., “2020-01-01 to 2023-03-01”), or partial ranges (e.g., “from 2020-01-01”, “until 2023-03-01”)Example:
date_range={
  range = "last 7 days"
  date = "string"
}
Attributes:
  • range: string - Time period to filter. Use presets like ‘last 7 days’, dynamic patterns like ‘Last 90 days’, custom ranges like ‘2020-01-01 to 2023-03-01’, or partial ranges like ‘from 2020-01-01’.
    • Allowed values:
      • last 7 days
      • last 30 days
      • last 3 months
      • last 6 months
      • last 12 months
      • week to date
      • month to date
      • quarter to date
      • year to date
      • previous week
      • previous month
      • previous quarter
      • previous year
      • all time
  • date: string - Date column to filter on. Required when the data has multiple date columns.
​
date_grain
string
Time grain for date truncation (default: day for date columns)Allowed values:
  • day
  • week
  • month
  • quarter
  • year
  • hour
  • day of week
  • day of month
  • day of year
  • week of year
  • month of year
  • quarter of year
​
handle_missing
string
default:"connect"
How to handle missing data points. “connect” auto-connects points (default), “gaps” shows visual breaks, “zero” fills with zeros.Allowed values:
  • connect
  • gaps
  • zero
​
x
string
required
Column name for x-axis
​
x_fmt
string
Format for x values and axis labels. See Value Formatting for available formats.
​
y_fmt
string
Format for y values and axis labels. See Value Formatting for available formats.
​
y2_fmt
string
Format for y2 values and axis labels. See Value Formatting for available formats.
​
series
string
Column name for series grouping (applies to all series)
​
size
string
Column name for size
​
point_title
string
Column name for individual point labels displayed at the top of the tooltip
​
title
string
Title to display above the component
​
subtitle
string
Subtitle to display below the title
​
info
string
Information tooltip text (can only be used with title). Displays an info icon next to the title.
​
info_link
string
URL to link the info text to (can only be used with info)
​
info_link_title
string
Create a custom link title for the info link, placed after the info text (can only be used with info_link)
​
where
string
Custom SQL WHERE condition to apply to the query. For date filters, use date_range instead.
​
having
string
Custom SQL HAVING condition to apply to the query after GROUP BY
​
limit
number
Maximum number of rows to return from the query. Note: When used with tables, limit will disable subtotals to prevent incomplete subtotal rows.
​
order
string
Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)
​
qualify
string
Custom SQL QUALIFY condition to filter windowed results
​
width
number
Set the width of this component (in percent) relative to the page width
​
height
number
Set a fixed height for the chart in pixels
​
x_sort
string
Sort order for x-axis categories. Options: asc (alphabetical), desc (reverse alphabetical), data (preserve query order), or an array for custom order like ["A", "B", "C"]Allowed values:
  • asc
  • desc
  • data
​
y_axis_options
options group
Configure the y-axisExample:
y_axis_options={
  title = "string"
  title_position = "top"
  ticks = true
  baseline = true
  labels = true
  gridlines = true
  min = 0
  max = 0
  fit_to_data = true
  interval = 0
}
Attributes:
  • title: string
  • title_position: string - Position of the axis title. “top” places it horizontally at the top, “side” places it vertically along the axis. Defaults to “side” for 100% stacked charts, “top” otherwise.
    • Allowed values:
      • top
      • side
  • ticks: boolean
  • baseline: boolean
  • labels: boolean - Show/hide axis labels
  • gridlines: boolean - Show/hide gridlines
  • min: number - Minimum value for this axis
  • max: number - Maximum value for this axis
  • fit_to_data: boolean - Fit the axis to the data instead of including 0
  • interval: number - Interval between axis ticks for numeric axes. This option is a suggestion, the actual interval may differ.
​
y2_axis_options
options group
Configure the secondary y-axisExample:
y2_axis_options={
  title = "string"
  title_position = "top"
  ticks = true
  baseline = true
  labels = true
  gridlines = true
  min = 0
  max = 0
  fit_to_data = true
  interval = 0
}
Attributes:
  • title: string
  • title_position: string - Position of the axis title. “top” places it horizontally at the top, “side” places it vertically along the axis. Defaults to “side” for 100% stacked charts, “top” otherwise.
    • Allowed values:
      • top
      • side
  • ticks: boolean
  • baseline: boolean
  • labels: boolean - Show/hide axis labels
  • gridlines: boolean - Show/hide gridlines
  • min: number - Minimum value for this axis
  • max: number - Maximum value for this axis
  • fit_to_data: boolean - Fit the axis to the data instead of including 0
  • interval: number - Interval between axis ticks for numeric axes. This option is a suggestion, the actual interval may differ.
​
x_axis_options
options group
Configure the x-axisExample:
x_axis_options={
  title = "string"
  label_wrap = true
  ticks = true
  baseline = true
  labels = true
  gridlines = true
  min = 0
  max = 0
  fit_to_data = true
  min_interval = "year"
  max_interval = "year"
  interval = 0
  label_rotate = 0
  max_label_length = 0
}
Attributes:
  • title: string
  • label_wrap: boolean
  • ticks: boolean
  • baseline: boolean
  • labels: boolean - Show/hide axis labels
  • gridlines: boolean - Show/hide gridlines
  • min: number - Minimum value for this axis
  • max: number - Maximum value for this axis
  • fit_to_data: boolean - Fit the axis to the data instead of including 0
  • min_interval: string - Minimum interval between axis ticks for time-based axes. This option is a suggestion, the actual interval may differ.
    • Allowed values:
      • year
      • quarter
      • month
      • week
      • day
      • hour
  • max_interval: string - Maximum interval between axis ticks for time-based axes. This option is a suggestion, the actual interval may differ.
    • Allowed values:
      • year
      • quarter
      • month
      • week
      • day
      • hour
  • interval: number - Interval between axis ticks for numeric axes. This option is a suggestion, the actual interval may differ.
  • label_rotate: number - Rotation angle of axis label in degrees. Positive values rotate clockwise, negative values rotate counter-clockwise.
  • max_label_length: number - Maximum character length for axis labels. Labels exceeding this length will be truncated with an ellipsis. Defaults to 20 characters when labels are rotated.
​
legend
boolean
default:"true"
Show legend
​
legend_location
string
default:"top"
Position of the legend (top or bottom)Allowed values:
  • top
  • bottom
​
series_order
array
Array of series names to define the order of series in the chart and legend. Series not in the array will appear after the ordered ones.
​
chart_options
options group
Additional chart configuration optionsAttributes:
  • color_palette: array
  • series_colors: map
  • zoom: boolean - Enables zoom by dragging on the chart area
  • top_padding: number - Additional padding (in px) above the chart area to prevent labels from being cut off
​
y
string | array
required
Column name for y-axis
​
fmt
string
Format for this series’ values. See Value Formatting for available formats.
​
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"
  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
  • show_overlap: boolean - Show labels for every point even when they overlap
​
options
options group
Attributes:
  • color: string
  • opacity: number - Between 0 and 1
​
stacked
boolean | string
default:"true"
Whether to stack the bars. Set to “100%” for percentage stacking where each bar shows its proportion of the total.
​
y2
string | array
Column name for secondary y-axis
​
bar_options
options group
Attributes:
  • color: string
  • opacity: number - Between 0 and 1

​
Allowed Children