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

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Charts

- [BarChart](https://epidermis.getarbol.com/components/charts/bar-chart/): 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](https://epidermis.getarbol.com/components/charts/calendar-heatmap/): 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](https://epidermis.getarbol.com/components/charts/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](https://epidermis.getarbol.com/components/charts/chart-panel/): 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](https://epidermis.getarbol.com/components/charts/donut-chart/): 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](https://epidermis.getarbol.com/components/charts/funnel-chart/): Where a process narrows, stage by stage, widest first. Each stage shows its value; the tooltip adds its share of the first stage.
- [GaugeChart](https://epidermis.getarbol.com/components/charts/gauge-chart/): 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](https://epidermis.getarbol.com/components/charts/sparkline/): A metric’s recent shape beside its figure, without axes or tooltip. An outcome color tells good news from bad.
- [TrendChart](https://epidermis.getarbol.com/components/charts/trend-chart/): 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.

Source: https://epidermis.getarbol.com/components/charts/index.mdx