Skip to main content

​
Example

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

​
Attributes

​
data
String
required
Name of the table to query
​
filters
Array
default:"[]"
Array of column names to use as filters
​
date_range
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 = value
  date = "string"
}
Attributes:
  • range: enum
  • date: string
​
date_grain
Time grain for date truncation (default: day for date columns)
​
x
String
required
Column name for x-axis
​
x_fmt
String
Format for x values and axis labels
​
y_fmt
String
Format for x values and axis labels
​
y2_fmt
String
Format for x values and axis labels
​
series
String
Column name for series
​
size
String
Column name for size
​
title
String
Title to display above the chart
​
subtitle
String
Subtitle to display below the title
​
info
String
Information tooltip text (can only be used with title)
​
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
​
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
​
y_axis_options
default:"{}"
Configure the y-axisExample:
y_axis_options={
  title = "string"
  ticks = true
  baseline = true
  labels = true
  gridlines = true
  min = 0
  max = 0
  fit_to_data = true
  interval = 0
}
Attributes:
  • title: string
  • 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
default:"{}"
Configure the secondary y-axisExample:
y2_axis_options={
  title = "string"
  ticks = true
  baseline = true
  labels = true
  gridlines = true
  min = 0
  max = 0
  fit_to_data = true
  interval = 0
}
Attributes:
  • title: string
  • 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
default:"{}"
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 = value
  max_interval = value
  interval = 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: enum - Minimum interval between axis ticks for time-based axes. This option is a suggestion, the actual interval may differ.
  • max_interval: enum - Maximum interval between axis ticks for time-based axes. This option is a suggestion, the actual interval may differ.
  • interval: number - Interval between axis ticks for numeric axes. This option is a suggestion, the actual interval may differ.
​
legend
Boolean
default:"true"
Show legend
​
chart_options
Example:
chart_options={
  color_palette = []
}
Attributes:
  • color_palette: array
​
y
String | Array
required
Column name for y-axis
​
fmt
String
Format for this series’ values
​
data_labels
default:"{}"
Label each point in the series with its valueExample:
data_labels={
  position = value
  fmt = value
  size = 0
  distance = 0
  rotate = 0
  color = "string"
  show_overlap = true
}
Attributes:
  • position: effects - Position the label relative to its data point
  • fmt: enum - 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
Example:
options={
  color = "string"
}
Attributes:
  • color: string
​
y2
String | Array
Column name for secondary y-axis
​
stacked
Boolean
default:"true"
Whether to stack the bars
​
bar_options
Example:
bar_options={
  color = "string"
}
Attributes:
  • color: string
⌘I