# Line Chart

> Lines and areas that morph between ranges on shared x samples while the scale springs and gridlines slide; a gliding crosshair, a trailing tooltip that flips at the edge, legend toggles that flatten a series, a previous period dashed at 40%, and onActiveChange for a headline.

- Tier: Eased Pro
- Interaction: Hover
- Page: https://eased.dev/components/line-chart
- Installs: motion

## Install

Line Chart ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/line-chart
```

Lines and areas that morph between ranges, with a gliding crosshair, a trailing tooltip and legend toggles.

```tsx
import { LineChart } from "@/components/eased/line-chart/line-chart";
import { ChartRangeProvider } from "@/components/eased/_primitives/chart-core/range";

<ChartRangeProvider defaultValue="30d">
  <LineChart
    data={days}               // [{ date: "2026-10-17", revenue: 3141, previous: 3530 }, …]
    xKey="date"
    series={[
      { key: "revenue", label: "This period", area: true },
      { key: "previous", label: "Previous period", color: chartColor(1), dashed: true },
    ]}
    label="Revenue per day"
    onActiveChange={(i, d) => setHeadline(d?.revenue ?? total)}
  />
</ChartRangeProvider>
```

## Props

| Prop | Type | Default | |
|---|---|---|---|
| `data` | `Record<string, string \| number>[]` | | Oldest first, evenly spaced. |
| `xKey` | `string` | | Labels with the same key slide when the range changes. |
| `series` | `{ key, label, color?, dashed?, area? }[]` | | `dashed` is a previous period at 40%. Keep keys stable so lines morph. |
| `label` | `string` | | Names the figure, the slider and the hidden table. |
| `curve` | `"monotone" \| "linear"` | `"monotone"` | |
| `height` | `number` | `240` | Plot plus x labels; the legend sits above. |
| `format` / `formatTick` / `formatX` / `formatXDetail` | functions | | |
| `onActiveChange` | `(index, datum) => void` | | Drive a headline outside the chart. |
| `loading` | `boolean` | `false` | Dims and pulses the lines in place. |
| `zero` | `boolean` | area ? true : false | |
| `legend` | `boolean` | 2+ series | Keys toggle series; hovering one dims the others. |
| `defaultHidden` | `string[]` | | |

Keyboard: Tab to the plot; arrows, PageUp/PageDown, Home/End scrub; Escape lets go. `aria-valuetext` reads the date and every visible value; a hidden table lists all points.

**Motion signature:** a range change morphs every line from the shape on screen, resampled on shared x positions, while the value scale springs and gridlines slide; lines draw in left to right once; the crosshair glides on the snappy spring and the tooltip trails on its own, flipping before the edge; a toggled series flattens into the baseline as it fades.