Charts
Five components, no JavaScript library. The SVG is produced by the server, so it is already there at the first byte — nothing to load, nothing to wait for.The five
| Component | What it shows |
|---|---|
| ui.line_chart | a continuous evolution, with a crosshair on hover |
| ui.bar_chart | a comparison between categories |
| ui.pie_chart | a breakdown — shares of a whole |
| ui.scatter_chart | a correlation between two quantities |
| ui.sparkline | a TINY trend, inside a line of text or a cell |
Rendered here, for real
What follows is not a screenshot: these are the components, executed by this page.ui.line_chart
ui.bar_chart
ui.pie_chart
Direct
Search
Referral
ui.sparkline — inside a sentence
Revenue+18 %
The shape of the data
A list of two-value TUPLES. An `(x, y)` pair for what has two axes, a `(label, value)` pair for a breakdown.ui.line_chart([(1, 12), (2, 19), (3, 14)])
ui.bar_chart([("Jan", 12), ("Feb", 18)])
ui.pie_chart([("Direct", 42), ("Search", 31)])
# Several series: one `Series` per curve.
from bretzel.components import Series
ui.line_chart([Series(name="2025", data=A),
Series(name="2026", data=B)],
show_legend=True)
The failure mode to know about
A wrong shape does not RAISE: the chart renders “No data” and the page looks normal. It happened while writing this chapter — the four examples above were empty, and only a screenshot showed it. The probe, for its part, was counting `<svg>`s: the empty state is one.
The settings that really serve
| Parameter | What it changes |
|---|---|
| smooth=True | the curve goes Bézier instead of straight segments |
| area_fill=True | fills under the curve — readable for a volume, misleading for an average |
| show_axis / show_gridlines | to turn off for a mood chart, to keep as soon as values get read |
| y_format / y_unit | formats the axis — percentage, currency, unit |
| reference_lines | a threshold, a target: the line that gives the rest its meaning |