- BarChart: Values compared across categories: series side by side, stacked into one bar per category, or as horizontal bars for long names. Give each series the color its legend shows.
- CalendarHeatmap: A long period as a calendar: one cell per day, deeper where the day counted more, with weeks starting on the reader’s first day.
- Chart: The ECharts host behind every recipe, for a figure no recipe draws: an accessible image whose option takes its colors from useChartTokens and its look from the shared pieces. ECharts loads with the first chart.
- ChartPanel: The card a dashboard chart sits in: eyebrow, title, the headline figure with its change, a note, the legend at the end of the header, then the chart. ChartLegend names the series in their theme colors; ChartEmpty says there is nothing to draw.
- DonutChart: Part of a whole, with the total in the middle. Name the slices with a ChartLegend beside it; the tooltip gives each value and share.
- FunnelChart: Where a process narrows, stage by stage, widest first. Each stage shows its value; the tooltip adds its share of the first stage.
- GaugeChart: A rate from 0 to 1 as a dial, printed as a percentage in the middle. With no rate (nothing measured) it shows the empty note.
- Sparkline: A metric’s recent shape beside its figure, without axes or tooltip. An outcome color tells good news from bad.
- TrendChart: One metric over a period, against the period before it. Use it for daily or weekly figures; the open-ended variant dashes today, which is still being counted.
Charts
The charts components of @arbol-ai/ui: BarChart, CalendarHeatmap, Chart, ChartPanel, DonutChart, FunnelChart, GaugeChart, Sparkline, TrendChart.