Ridgeline

Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.

$npx shadcn@latest add @silicon-ui/ridgeline

datachartnew

Installation

$npx shadcn@latest add @silicon-ui/ridgeline

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/ridgeline/ridgeline.tsx
- components/silicon-ui/ridgeline/ridgeline.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 { Ridgeline } from "@/components/silicon-ui/ridgeline/ridgeline";

Prop	Type	Default
`series*` One ridge per series, drawn top to bottom.	`RidgelineSeries[]`	—
`label*` What is measured, such as "Daily highs in Zurich". Names the chart for assistive technology.	`string`	—
`unit` Unit after each value, such as "°C".	`string`	`""`
`formatValue`	`(value: number) => string`	—
`domain` Value range of the axis. Defaults to the data with a little room on each side.	`[number, number]`	—
`overlap` How far a ridge may rise into the rows above, in row heights.	`number`	`2.4`
`rowHeight` Height of one row in pixels.	`number`	`30`
`bandwidth` Smoothing in value units. Defaults to Silverman's rule per series.	`number`	—
`tint` Shades each ridge by its median, from a light tint to the full first series color, and shows the scale under the axis.	`boolean`	`true`
`active` Controlled id of the lifted ridge.	`string \| null`	—
`defaultActive`	`string \| null`	`null`
`onActiveChange`	`(id: string \| null) => void`	—
`emptyLabel`	`string`	`"No data yet"`
`ref`	`Ref<HTMLElement>`	—
`className`	`string`	—