# Charts

Bar chart and progress ring that animate with your data. Drag across the bars to read each value while the others dim, with stacked bars, values below zero, a goal line and smooth range switches.

> Composed · Pro · Data Display — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/charts
```

## Import

```tsx
import { BarChart, BarChartLegend, ProgressRing } from "@/components/ui/charts/charts";
```

## Variants

- `bar` — Bar: `npx @lumioui/cli add pro/charts-bar`
- `cashflow` — Cash flow: `npx @lumioui/cli add pro/charts-cashflow`
- `ring` — Ring: `npx @lumioui/cli add pro/charts-ring`

## Props

### BarChart

| Prop | Type | Notes |
| --- | --- | --- |
| `data` | `BarDatum[]` | — |
| `series?` | `BarSeries[]` | Stack keys for `values`. Omit for single bars. |
| `height?` | `number` | Plot height in pt (excluding header, x labels and range tabs). Default 180. |
| `color?` | `string` | Single-series fill (hex). Default theme primary. |
| `negativeColor?` | `string` | Single series: fill for bars below zero (e.g. destructive). Default `color`. |
| `goal?` | `BarChartGoal` | Dashed goal / limit line with a label in the right gutter. |
| `domain?` | `[number, number]` | Fixed value domain. Default fits the data, zero and the goal. |
| `formatValue?` | `(value: number) => string` | Format values in the header, callout and screen-reader text. |
| `header?` | `boolean | BarChartHeader` | Built-in reading header above the plot. `true` uses the defaults. |
| `callout?` | `boolean` | Floating value bubble over the touched bar. Default true, false with `header`. |
| `scrubbable?` | `boolean` | Allow drag-to-read. Default true. |
| `onScrub?` | `(reading: BarReading | null) => void` | Fires when the read bar or segment changes; `null` on release. |
| `labelEvery?` | `number` | Show every nth x label. Default: all up to 12 bars, then about six labels. |
| `ranges?` | `readonly string[]` | Range tabs under the plot. Swap `data` on change to reshape the bars. |
| `range?` | `string` | — |
| `defaultRange?` | `string` | — |
| `onRangeChange?` | `(range: string) => void` | — |
| `accessibilityLabel?` | `string` | Screen-reader summary. Default describes the bars. |
| `className?` | `string` | — |

### BarChartLegend

| Prop | Type | Notes |
| --- | --- | --- |
| `series` | `BarSeries[]` | — |
| `activeIndex?` | `number | null` | Segment being read — its row stays in ink, the others dim. |
| `className?` | `string` | — |

### ProgressRing

| Prop | Type | Notes |
| --- | --- | --- |
| `progress` | `number` | 0–1 fill fraction. Up to 2: past 1 a second lap runs over the first. |
| `size?` | `number` | Outer diameter in px. Default 120. |
| `thickness?` | `number` | Ring thickness in px. Default 12. |
| `color?` | `string` | Fill color (hex). Defaults to theme primary. |
| `trackColor?` | `string` | Track color (hex). Defaults to theme muted. |
| `surfaceColor?` | `string` | Surface behind the ring — cuts the seam where a second lap starts. Default card. |
| `onComplete?` | `() => void` | Fires once each time the ring reaches full from below. |
| `label?` | `string` | Screen-reader name ("Data used"). |
| `children?` | `React.ReactNode` | Center content (e.g. a percentage Text, or a rolling AnimatedNumber). |
| `className?` | `string` | — |

Source: https://lumioui.com/components/charts