Charts

Ready-to-copy chart recipes built on Recharts and the Aspyn kit's ChartContainer wrappers. Series colors come from --as-chart-* tokens, so every chart re-skins with the brand and dark mode automatically — switch the theme to see it.

Interactive

Click a total to switch the series. Daily data with a formatted axis and tooltip — the flagship pattern.

Bar Chart — Interactive
Toggle Desktop / Mobile totals to redraw 3 months daily.

Area

Volume over a continuous range, filled beneath the line.

Area Chart
A single filled series.
Trending up by 5.2% this month
March – August 2026
Stacked
Series summed into bands.
Gradient
Fills fading with a linear gradient.

Bar

Compare discrete categories.

Multiple
Grouped bars per category.
Trending up by 5.2% this month
March – August 2026
Horizontal
Bars laid out along the x-axis.
Stacked + Legend
Series stacked with a legend.

Line

Trends across an ordered axis.

Multiple
Two monotone lines.
Trending up by 5.2% this month
March – August 2026
Dots
Points marked at each value.
Step
Stepped interpolation.

Pie

Parts of a whole.

Donut with Text
Total rendered in the hole.
Trending up by 5.2% this month
March – August 2026
Label
Slice labels drawn inline.
Legend
Categories keyed by a legend.

Radar

Multivariate comparison on polar axes.

Dots
A single series with points.
Trending up by 5.2% this month
March – August 2026
Legend
Two series with a legend.
Circle Grid
A circular polar grid.

Radial

Values as arcs around a center.

Text
A single arc with a center total.
Trending up by 5.2% this month
March – August 2026
Grid
Every category as its own arc.

Tooltip

The ChartTooltipContent props matrix.

Default
Dot indicator, label + values.
Line Indicator
indicator="line".
Hide Label
Values only, no header row.