Ridgeline

A React component in Beamline's Charts & data-vis category.

Distributions per group as overlapping density ridges (response time by region, order size by plan): an overlap control, median and p95 readouts per row, hover or focus a ridge to bring it forward with its markers, and hatched rows for groups that were not measured.

Use it for

Comparing the shape of a distribution between groups: latency by region, deal size by segment, session length by plan.

Not for

One total per group (bar-chart).
A percentile over time (line-chart).

Anatomy

title, description, overlap switch (actions), table button
row labels (buttons, one per group)
ridges (density area per group, sharing one scale)
median and p95 markers on the active ridge
row summary (p50 · p95) at the end of each row
value axis with ticks and grid
hatched row for an unmeasured group

Variants

0: overlap: any number of row heights through the prop; the built-in switch offers none 0 · low 0.5 · medium 1 · high 2 and can be hidden
1: domain and bandwidth fixed or from the data
2: color per group (series palette by default)

States

loading (skeleton)
empty
unmeasured group (values null or empty): hatched row, “Not measured”
active ridge (lifted, outlined, markers shown, others dimmed)
table view (samples, median, p95, min, max per group)
narrow: the row summary moves to a readout under the axis
right-to-left: the value axis still runs left to right

Keyboard

Tab focuses the active (or first) row label; ↑/↓ move between groups, Home/End to the first/last
Focus or hover lifts that ridge; Escape releases it
Overlap switch: ← → choose a preset (radio group)

Motion

Ridges rise from their baselines once; a change of overlap or the active ridge is immediate. Nothing moves under reduced motion.

Props

Prop	Type	Default	Description
`data`	`RidgelineGroup[]`	—	{ key, label, values: (number \| null)[] \| null, color? } top to bottom. Null samples are skipped; a null or empty list is an unmeasured group.
`format`	`(value: number) => string`	—	How values read on the axis, markers and table: "182 ms".
`domain`	`[number, number]`	—	Axis range; the data with room on each side by default.
`bandwidth`	`number`	—	Smoothing in value units; Silverman's rule per group by default.
`overlap / defaultOverlap / onOverlapChange`	`number`	—	How far a ridge rises into the rows above, in row heights. Default 1.
`overlapControl`	`boolean`	—	Show the overlap switch in the header. Default true.
`height`	`number`	—	Plot height; about 34 px per group by default. Rows share it, so more overlap means taller ridges, not a taller chart.
`active / defaultActive / onActiveChange`	`string \| null`	—	The lifted group's key.
`title / hideTitle / description`	`string / boolean / ReactNode`	—	The figure's name (a heading unless hidden) is always its accessible name.
`table`	`boolean`	—	Offer “View as table”. Default true.
`loading`	`boolean`	—	Skeleton of the chart's shape; keeps the frame's size.
`actions`	`ReactNode`	—	Controls beside the legend (range, offset).
`className`	`string`	—	Lands on the figure.
`classNames`	`ChartClassNames`	—	Frame, tooltip and slice-list parts as applicable to this chart.
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—	The native chart figure; layout measurement refs stay internal.

Dependencies

motion

Import

import { Ridgeline } from "@/components/ridgeline/ridgeline";

Get it

Ridgeline is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent