Smooth lines on shared axes with an interactive legend, a crosshair that snaps to the nearest point and a tooltip listing every series.
npx shadcn@latest add https://hyperblur.dev/r/multi-line-chart.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/multi-line-chart.tsx.
import { MultiLineChart } from "@/components/hyperblur/multi-line-chart"
<MultiLineChart labels={["Mon", "Tue", "Wed"]} series={[{ name: "p50", data: [42, 38, 45] }, { name: "p95", data: [120, 110, 135] }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| series | { name: string; data: number[]; color?: string }[] | three sample series | Series to plot. data lines up with labels by index. |
| labels | string[] | Jan to Dec | X axis labels, one per point. |
| colors | string[] | ["#2f7bff", "#8b5cf6", "#34d399", "#fbbf24", "#fb7185", "#7fb3ff"] | Palette used by series without a color. |
| height | number | 200 | Chart height in pixels. The width follows the container. |
| smooth | boolean | true | Use monotone curves. Set false for straight segments. |
| legend | "top" | "bottom" | "none" | "bottom" | Legend position. Entries are buttons that hide or show a series. |
| valueFormatter | (n: number) => string | Formats axis ticks and tooltip values. | |
| locale | string | "en-US" | Locale for the default number formatting. |
| animate | boolean | true | Draw the lines in on mount. |