Preview Updated 2026-05-10

Ridge plot

Vertically stacked density curves across multiple groups.

Basic usage

Data is passed via props and rendered as pure SVG, with no third-party charting dependency. Colors are drawn from the --viz-1..8 tokens and are colorblind-friendly.

src/App.vue vue

<CfRidgePlot ... />

src/App.tsx tsx

<CfRidgePlot ... />

Multimodal distributions

Stacking multiple bells produces bimodal distributions, common when crossing seasons or user cohorts with secondary peaks.

src/App.vue vue

<CfRidgePlot :rows="rows" :overlap="0.5" />

src/App.tsx tsx

<CfRidgePlot rows={rows} overlap={0.5} />

API

Prop	Type	Default	Description
`rows`	`RidgeRow[]`	`—`	{ label, density: number[], colorIndex? }[]
`overlap`	`0..1`	`0.6`	Inter-row overlap ratio