Line chart

A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.

$npx shadcn@latest add @silicon-ui/line-chart

datanew

Installation

$npx shadcn@latest add @silicon-ui/line-chart

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/line-chart/line-chart.tsx
- components/silicon-ui/line-chart/line-chart.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { LineChart } from "@/components/silicon-ui/line-chart/line-chart";

Prop	Type	Default
`data*`	`LineChartDatum[]`	—
`series*`	`LineChartSeries[]`	—
`label*` What is measured, such as "Signups". Names the chart for assistive technology.	`string`	—
`unit` Unit after each value in the tooltip, such as "ms".	`string`	`""`
`height` Plot height in pixels. The width follows the container.	`number`	`220`
`formatValue` Formats values in the tooltip and data table.	`(value: number, series: LineChartSeries) => string`	—
`formatTick` Formats the value axis. Defaults to a compact number, such as 1.2K.	`(value: number) => string`	`value => compact.format(value)`
`hiddenSeries` Controlled hidden series keys.	`string[]`	—
`defaultHiddenSeries`	`string[]`	—
`onHiddenSeriesChange`	`(hidden: string[]) => void`	—
`onActiveChange` Called as the crosshair moves, and with null when it leaves. Use it to drive a headline readout.	`(index: number \| null, datum: LineChartDatum \| null) => void`	—
`loading` Keeps the current lines on screen, dimmed, while the next range loads.	`boolean`	`false`
`emptyLabel` Shown when there are no points.	`string`	`"No data for this range"`
`legend` Series toggles above the plot. Shown by default when there is more than one series.	`boolean`	—
`categoryLabel` Header of the first column in the data table read by screen readers.	`string`	`"Date"`
`curve` Smooth monotone curves that never swing past the data, or straight segments.	`"smooth" \| "linear"`	`"smooth"`
`ref`	`Ref<HTMLElement>`	—
`className`	`string`	—