Chart
A suite of themed chart components built on Recharts. All series colors default to the categorical --graphic-1 through --graphic-10 tokens so charts stay consistent with your theme. Toggle the legend, axes, and grid independently; choose from five sizes: xxs · xs · sm · md · lg.
Line chart
Multi-series area chart with optional gradient fill, smooth curves, axis labels, and a moveable legend.
Line chart variants
No area fill, no legend, and an alternate legend position.
Stacked area chart
Add the stacked prop to LineChart to stack series cumulatively.
Bar chart
Grouped multi-series bar chart. Each category shows bars side by side.
Stacked bar chart
Set stacked to stack series on top of each other.
Vertical bar chart
Set orientation="vertical" for horizontal bars (categories on the Y-axis). Works with stacked too.
Donut chart
Proportional data as a ring. Pass centerLabel and centerValue to display text in the hole.
Pie chart
Set innerRadiusPct=0 to render a filled pie instead of a donut.
Radial chart
Concentric progress rings — each ring represents one series. Provide max per entry to define 100%; otherwise value is treated as a percentage (0–100).
Radar chart
Multi-dimensional comparison on a spider/web chart. Set filled=false to show only the outline polygon.
Scatter chart
X/Y scatter plot with multiple independent series. Each series provides its own data array of { x, y } points.
Sizes
All chart types share the same size prop: xxs · xs · sm · md · lg. Smaller sizes work well as sparklines; hide axes/legend for a minimal look.
size="xxs"
size="xs"
size="sm"
size="md"
size="lg"