Ridgeline Density Chart React component
Layered Gaussian density estimates on a shared scale, with adjustable smoothing, region inspection, sample counts and median/90th-percentile readouts.
About the Ridgeline Density Chart component
Ridgeline Density Chart estimates continuous distributions from raw samples using Gaussian kernels. Each row integrates to a probability density, and every region shares the same x-axis and density scale. Dashed markers show sample medians.
When to use it
Compare latency distributions across regions or services.
Inspect differences in spread and tails that a single average hides.
Installation
Add the Ridgeline Density Chart component to your project with the shadcn CLI. It lands in components/ridgeline-density-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/ridgeline-density-chartProps
<RidgelineDensityChart /> accepts 8 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Latency, in layers" |
| subtitle | string | "Regional response times. One scale, distinct distributions." |
| series | { label: string; values: number[] }[] | SERIES |
| bandwidth Gaussian kernel bandwidth in data units. Defaults to a per-series Silverman estimate. | number | — |
| domain Optional visible x-domain. The automatic domain includes three kernel widths of padding. | [number, number] | — |
| rowHeight | number | 58 |
| formatValue | (value: number) => string | FORMAT |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Latency, in layers"
- subtitlestringDefault: "Regional response times. One scale, distinct distributions."
- series{ label: string; values: number[] }[]Default: SERIES
- bandwidth
Gaussian kernel bandwidth in data units. Defaults to a per-series Silverman estimate.
number - domain
Optional visible x-domain. The automatic domain includes three kernel widths of padding.
[number, number] - rowHeightnumberDefault: 58
- formatValue(value: number) => stringDefault: FORMAT
Ridgeline Density Chart FAQ
- How is smoothing determined?
- Each series uses a robust Silverman bandwidth estimate, with a finite fallback for constant or single-point data. Sharp/Balanced/Smooth multiply that bandwidth. Set bandwidth to use your own value in data units.
- What do the markers and statistics represent?
- Medians and 90th percentiles come from sorted raw samples, so they do not change when smoothing changes. Rows share one peak-density scale; the automatic x-domain includes three kernel widths of padding. A supplied domain clips the displayed density without renormalizing it.
