Line Chart
Basic line chart with tooltip and crosshair:
Multi-series Line Chart
Multiple lines with different curves:
Legend — Line Chart
Add legend: true to label each series below the chart:
Bar Chart
Grouped bar chart comparing categories:
Stacked Bar Chart
Bar chart with variant: 'stacked' — series stack vertically per category:
Horizontal Bar Chart
Bar chart with variant: 'grouped-horizontal' — categories on the Y axis, values on the X axis:
Horizontal Stacked Bar Chart
Use variant: 'stacked-horizontal' — horizontal bars stacked per category:
Legend — Bar Chart
Grouped bar chart with a legend positioned at the top:
Area Chart
Filled area with monotone curve and low opacity:
Legend — Area Chart
Multi-series area chart with a bottom legend:
Step Line Chart
Line chart with step interpolation:
Reactive Chart
Chart that updates when signal data changes:
Reactive Bar Chart
Bar chart that updates when signal data changes, with stagger animation on new bars:
Event Hooks
Using onHover and onClick to react to chart interactions:
Pie Chart
Basic pie chart with labeled slices:
Donut Chart
Donut chart with tooltip:
Semi-circle Donut
Semicircle donut — useful for gauges and progress indicators:
Sparkline — Line
Minimal inline sparkline inside a table cell or card:
Sparkline — Area
Area variant with fill:
Sparkline — Bar
Bar variant — one rect per value:
Sparkline — Reactive
Sparkline that updates when signal data changes:
Sparkline — Stack
Horizontal stacked bar — proportional segments with per-segment colors:
Custom Tooltip
Rich HTML tooltip with custom formatting:
Pie Chart with Plugin
A donut chart that installs a custom plugin to draw a total count label in the center hole: