# Line Chart

Live line and area chart that draws itself in and reshapes smoothly between ranges. Drag along the line and the header rolls to that point, or use two fingers to measure the change between two.

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

## Install

```bash
npx @lumioui/cli add pro/line-chart
```

## Import

```tsx
import { LineChart, LineChartLegend } from "@/components/ui/line-chart/line-chart";
```

## Variants

- `compare` — Year over year: `npx @lumioui/cli add pro/line-chart-compare`
- `elevation` — Trail elevation: `npx @lumioui/cli add pro/line-chart-elevation`
- `stock` — Stock detail: `npx @lumioui/cli add pro/line-chart-stock`
- `weight` — Weight goal: `npx @lumioui/cli add pro/line-chart-weight`

## Props

### LineChart

| Prop | Type | Notes |
| --- | --- | --- |
| `data?` | `number[]` | Single-series shorthand. Ignored when `series` is set. |
| `dataLabel?` | `string` | Name of the single `data` series (callout + screen reader). Default "Value". |
| `series?` | `LineChartSeries[]` | One or more series. Keep to four or fewer; a legend is the caller's job. |
| `labels?` | `string[]` | Per-point label shown while reading (a date, a km mark). |
| `xLabels?` | `string[]` | Evenly spaced axis labels under the plot. |
| `height?` | `number` | Plot height in pt (excluding header, x labels and range tabs). Default 200. |
| `curve?` | `"smooth" | "linear" | "step"` | "smooth" (default), "linear", or "step" for balances that change in jumps. |
| `color?` | `string` | Single-series stroke colour (hex). Default theme primary. |
| `area?` | `boolean` | Area wash for the single `data` series. Default true. |
| `strokeWidth?` | `number` | Line weight. Default 2. |
| `reference?` | `LineChartReference` | Dashed reference line with an optional label. |
| `referenceFill?` | `{ above: string` | Single series with a `reference`: fill the area against the reference  line, tinted `above` where the line is over it and `below` where it is  under (hex, e.g. success / destructive). |
| `below` | `string }` | — |
| `minMax?` | `boolean` | Label the highest and lowest point of the first series. Default false. |
| `grid?` | `number` | Horizontal gridlines with value labels. Pass a count (e.g. 3). Default 0. |
| `domain?` | `[number, number]` | Fixed y domain. Default fits the data (and the reference line). |
| `formatValue?` | `(value: number) => string` | Format values in labels, callout, header and screen-reader text. |
| `scrubbable?` | `boolean` | Allow press-and-drag reading. Default true. |
| `measurable?` | `boolean` | Two-finger measure between two points. Default true when scrubbable. |
| `callout?` | `boolean` | Floating value callout over the read point. Default true, false when `header` is set. |
| `header?` | `boolean | LineChartHeader` | Built-in reading header above the plot. `true` uses the defaults. |
| `trend?` | `boolean` | Colour a single series by direction: accent when the header value is at  or above its baseline, destructive below. Default false. |
| `live?` | `boolean` | Live data: a static dot marks the latest point, and appended points  extend the tail instead of reshaping the line. Default false. |
| `capacity?` | `number` | Fixed number of x slots (e.g. 78 five-minute bars in a session). The  line fills the first `data.length` of them, leaving the rest of the day  open to the right. Default: the data length. |
| `onScrub?` | `(index: number | null) => void` | Fires when the scrubbed index changes; `null` on release. |
| `onMeasure?` | `(span: { from: number` | Fires when a two-finger measure changes; `null` on release. |
| `to` | `number } | null) => void` | — |
| `ranges?` | `readonly string[]` | Range tabs under the plot (1D, 1W, 1M…). Swap `data` on change to morph the path. |
| `range?` | `string` | Controlled range. |
| `defaultRange?` | `string` | Uncontrolled initial range. Default the first entry. |
| `onRangeChange?` | `(range: string) => void` | — |
| `accessibilityLabel?` | `string` | Screen-reader summary. Default describes the first series. |
| `className?` | `string` | — |

### LineChartLegend

| Prop | Type | Notes |
| --- | --- | --- |
| `series` | `Pick<LineChartSeries, "key" | "label" | "color" | "dashed">[]` | Same series array the chart renders — colours resolve the same way. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/line-chart