Ridge Chart
Ridgeline stacked density plots for comparing multiple distributions over a common axis.
Source
LLM docs
Package
npm install @plocks/chartsExamples
6
Properties
44
Playground
Basics
Layered density plots (joyplot) comparing distributions across categories.
Loading demo…
import { RidgeChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<RidgeChart
title="Customer satisfaction distribution"
subtitle="Annual NPS density"
h={360}
series={SERIES}
samples={96}
bandwidth={3}
statsMarkers={{ enabled: true, showP90: true, showLabels: true }}
/>
);
}Api Latency Endpoints
Loading demo…
import { RidgeChart } from '@plocks/charts';
import { SERIES, formatLatency } from './data';
export function Demo() {
return (
<RidgeChart
title="API latency distribution by endpoint"
subtitle="Density of response times across rolling deployments"
h={450}
series={SERIES}
samples={128}
bandwidth={16}
bandPadding={0.24}
amplitudeScale={0.92}
grid={{ show: true, showMinor: false }}
xAxis={{
show: true,
title: 'Latency (ms)',
labelFormatter: (value) => formatLatency(value as number),
}}
yAxis={{
show: true,
tickLength: 6,
}}
/>
);
}Daily Active Users Cohorts
Loading demo…
import { RidgeChart } from '@plocks/charts';
import { SERIES, formatThousands } from './data';
export function Demo() {
return (
<RidgeChart
title="Daily active users across feature cohorts"
subtitle="Distribution of session counts over the last six months"
h={480}
series={SERIES}
samples={128}
bandwidth={18}
bandPadding={0.32}
amplitudeScale={0.95}
grid={{ show: true, showMinor: false }}
xAxis={{
show: true,
title: 'Daily active users',
labelFormatter: (value) => formatThousands.format(Math.round(value as number)),
tickLength: 6,
}}
yAxis={{
show: true,
tickLength: 6,
}}
/>
);
}Employee Satisfaction Survey
Loading demo…
import { RidgeChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<RidgeChart
title="Employee satisfaction score distribution"
subtitle="Quarterly pulse survey responses by team"
h={420}
series={SERIES}
samples={110}
bandwidth={0.35}
bandPadding={0.3}
amplitudeScale={0.85}
grid={{ show: true, showMinor: false }}
xAxis={{
show: true,
title: 'Satisfaction score (1-5)',
labelFormatter: (value) => (value as number).toFixed(1),
tickLength: 6,
}}
yAxis={{
show: true,
tickLength: 6,
}}
/>
);
}Revenue Transaction Density
Loading demo…
import { RidgeChart } from '@plocks/charts';
import { SERIES, currencyFormatter } from './data';
export function Demo() {
return (
<RidgeChart
title="Revenue per transaction by product line"
subtitle="Transaction value distributions across seasonal cycles"
h={440}
series={SERIES}
samples={128}
bandwidth={14}
bandPadding={0.28}
amplitudeScale={0.9}
grid={{ show: true, showMinor: false }}
xAxis={{
show: true,
title: 'Revenue per transaction',
labelFormatter: (value) => currencyFormatter.format(value as number),
}}
yAxis={{
show: true,
tickLength: 6,
}}
/>
);
}Shipping Time Carriers
Loading demo…
import { RidgeChart } from '@plocks/charts';
import { SERIES, formatDays } from './data';
export function Demo() {
return (
<RidgeChart
title="Shipping time distribution by carrier"
subtitle="Parcel delivery performance across recent quarters"
h={420}
series={SERIES}
samples={110}
bandwidth={0.45}
bandPadding={0.3}
amplitudeScale={0.9}
grid={{ show: true, showMinor: false }}
xAxis={{
show: true,
title: 'Delivery time (days)',
labelFormatter: (value) => formatDays(value as number),
tickLength: 6,
}}
yAxis={{
show: true,
tickLength: 6,
}}
/>
);
}Related charts
Further reading
React Native design for iOS, Android, and Web.
Quick Links
Resources