Ridgeline chart
Overlapping density ridges per group from our own KDE, with labels on the left and hover to lift a ridge and show its median.
Preview
How long the commute takes
One-way, survey of 960 people- Lisbon: median 27, range 16 to 42, 160 values
- Berlin: median 33, range 16 to 46, 160 values
- New York: median 45, range 24 to 75, 160 values
- Tokyo: median 48, range 27 to 63, 160 values
- São Paulo: median 57, range 27 to 88, 160 values
- Lagos: median 59, range 34 to 86, 160 values
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { key: string; label: string; values: number[]; color?: string }[] | — | Raw samples per ridge; densities are estimated. |
| label | string | — | Accessible name of the chart. |
| rowHeight | number | 34 | Row height in px. |
| overlap | number | 1.4 | How far a ridge may rise into the rows above. |
| valueLabel | string | — | Axis title. |
| color | string | — | One colour for every ridge; omit to cycle chart colours. |
| valueFormatter | (value: number) => string | 1 decimal | Formats values. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.