Skip to content

Charts

The charts components of @arbol-ai/ui: BarChart, CalendarHeatmap, Chart, ChartPanel, DonutChart, FunnelChart, GaugeChart, Sparkline, TrendChart.

  • 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.

Type to search…

↑↓ navigate↵ selectEsc close