Skip to main content
BarChart renders one or more data series as vertical bars. Each ChartSeries maps a key from your data to a set of bars, and x_axis controls the category labels along the bottom. Colors are automatically assigned from the theme’s chart palette. See Charts for the shared data, series, and formatting model.

​
Basic Usage

​
Stacked

Set stacked=True to stack series on top of each other instead of placing them side by side. This is useful when you want to show both individual values and the total.

​
Minimal

Set show_grid=False to drop the background gridlines. Bars carry their own baseline, so the chart stays readable without them — cleaner for compact or embedded views where exact values aren’t the point.

​
Horizontal

Set horizontal=True to render bars horizontally. Categories appear along the y-axis and values extend to the right.

​
Value Formatting

Use value_format to format numeric values on the value axis and in tooltips. It accepts the same pipe strings as Prefab expressions and data table columns, including currency, currency:EUR, percent:1, and compact:0.

​
API Reference

BarChart Parameters

​
data
list[dict] | str
required
Data as a list of dicts, or a {{ field }} interpolation reference.
​
series
list[ChartSeries]
required
Series definitions — each becomes a group of bars on the chart.
​
x_axis
str | None
default:"None"
Data key for x-axis category labels.
​
height
int
default:"300"
Chart height in pixels.
​
stacked
bool
default:"False"
Stack series on top of each other.
​
horizontal
bool
default:"False"
Render bars horizontally instead of vertically.
​
bar_radius
int
default:"4"
Corner radius of each bar in pixels.
​
show_legend
bool
default:"False"
Show a legend below the chart.
​
show_tooltip
bool
default:"True"
Show tooltips on hover.
​
show_grid
bool
default:"True"
Show horizontal grid lines.
​
show_y_axis
bool
default:"True"
Show the y-axis with its tick labels. Set to False for a compact, axis-free reading where the shape matters more than exact values.
​
value_format
str
default:"\"auto\""
Format value-axis ticks and tooltip values with an expression pipe such as currency, currency:EUR, percent:1, or compact:0.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

ChartSeries Parameters

​
data_key
str
required
Data field to plot — must match a key in the data dicts.
​
label
str | None
default:"None"
Display label for legends and tooltips. Defaults to the data_key value.
​
color
str | None
default:"None"
CSS color override. By default, colors cycle through the theme’s chart palette (--chart-1 through --chart-5).

​
Protocol Reference

BarChart
{
  "type": "BarChart",
  "id?": "string",
  "onMount?": "any",
  "data": "object[] | string (required)",
  "series": "[ChartSeries] (required)",
  "xAxis?": "string",
  "height?": "300",
  "stacked?": false,
  "horizontal?": false,
  "barRadius?": 4,
  "showLegend?": true,
  "showTooltip?": true,
  "animate?": true,
  "showGrid?": true,
  "showYAxis?": true,
  "valueFormat?": "string",
  "cssClass?": "string"
}
ChartSeries
{
  "dataKey": "string (required)",
  "label?": "string",
  "color?": "string"
}
For the complete protocol schema, see BarChart, ChartSeries.