Lines and areas that morph between ranges, with a gliding crosshair, a trailing tooltip and legend toggles.
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>Installation
npx shadcn add @eased-pro/line-chartNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
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.