Docs
Examples
Jump to live gallery examples for each chart type.
Gallery examples
All kitchen-sink cards render real chart components — no screenshots.
- Revenue over timeline
Single-series line for monthly revenue.
- Revenue vs customersline
Multiple series with legend and tooltip.
- Smooth revenue areaarea
Filled area with monotoneX smoothing.
- Stacked costsarea
Stacked areas for revenue and costs.
- Gradient fillarea
Theme-aware vertical gradient fade.
- Point markersarea
Area series with showPoints enabled.
- Sized vertical barsbar
maxBarSize cap with rounded corners.
- Horizontal categoriesbar
Long labels on the Y axis.
- Grouped with legendbar
Multi-series side-by-side with toggles.
- Stacked compositionbar
Part-to-whole bars per category.
- Signed fill accessorbar
Per-bar color with explicit sign labels.
- Formatted labelsbar
Outside labels with custom format.
- Compact stacked tilebar
Short frame with legend and tooltip.
- MTD reference bandbar
Category highlight behind grouped bars.
- Legend and tooltippie
Basic pie with Intl-formatted value and percent tooltips.
- Donut innerRadiuspie
Donut hole via innerRadius with outside labels.
- Rose chartpie
Equal angles with sqrt-scaled radii.
- Carrier capacitypie
Operational donut with center utilization KPI.
- Revenue splitdonut
Full donut with outside labels, legend, and tooltip.
- KPI storage ringdonut
Used vs available with center utilization label.
- Half-year progressdonut
Semicircle with total below the arc.
- Basic scatterscatter
Default markers with grid and tooltip.
- Sized bubblesscatter
sqrt-scaled radius from a third numeric field.
- Air cargo lanesscatter
Rate vs transit with tonnage and region color.
- Empty stateline
Default empty rendering when data is missing.
- Responsive lineline
Charts that follow container width.
- Custom palettebar
Series colors via CSS chart tokens.
Open the gallery to filter by chart type, or the playground to tune props live.