# Line chart

> Multi-series lines with legend toggles, crosshair and shared tooltip.

Component · Free · https://lodeui.com/components/line-chart

## When to use

- Comparing several series over time.

## When not to use

- Parts of a total: use a stacked area chart.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/line-chart.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { LineChart } from "@/components/ui/line-chart";

export function Latency() {
  return (
    <LineChart
      labels={["Mon", "Tue", "Wed"]}
      series={[
        { key: "p50", label: "p50", color: "var(--chart-1)", values: [120, 118, 125] },
        { key: "p95", label: "p95", color: "var(--chart-3)", values: [310, 290, 330], dashed: true },
      ]}
    />
  );
}
```

## API reference

### LineChart

Multiple lines with a toggleable legend and shared tooltip.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| labels / series | `string[] / { key; label; color; values; dashed? }[]` | – | Data. |
| height | `number` | `260` | Height. |
| legend | `boolean` | `true` | Clickable legend. |
| loading / formatValue | `boolean / (n) => string` | – | Skeleton and number format. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach legend toggles |
| Enter / Space | Show or hide a series |

## Accessibility

- role="img"; legend items are toggle buttons with aria-pressed.
- Dashed lines help tell series apart without color.

## Motion

- Lines draw in and morph between datasets.

## Responsive behavior

- Measures its width; labels thin out.

## Performance

- One path per series.

## Notes for AI

- All series must have labels.length values.

## Related

- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Stacked area chart](https://lodeui.com/components/stacked-area-chart) — Stacked series above and below zero, morphing as the range changes.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.