Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Ridgeline plot

Fits many distributions into little height, one ridge per category, such as session lengths month by month. overlap sets how far each ridge reaches into the row above.

Charting library: TanStack Charts

Preview

Preview width

Installation

The command adds the example above to components/charts/ and, the first time, the chart kit to components/ui/charts/. Both are source files in your project from then on: read them, change them, delete what you don't use.

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

Each row of data is one observation with a category. The categories run top to bottom in the order they first appear.

import {
  Grid,
  Ridgeline,
  RidgelineChart,
  RidgelineTooltip,
  RidgelineXAxis,
  RidgelineYAxis,
} from "@/components/ui/charts";

// One row per session, in minutes.
const data = [
  { minutes: 6.6, month: "Jan" },
  { minutes: 16.8, month: "Jan" },
  { minutes: 21.7, month: "Jan" },
  { minutes: 3.8, month: "Jan" },
  { minutes: 17.1, month: "Feb" },
  { minutes: 24.3, month: "Feb" },
  { minutes: 5.2, month: "Feb" },
  { minutes: 19.6, month: "Feb" },
];

const formatMinutes = (value: number) => `${value} min`;

export const SessionsChart = () => (
  <RidgelineChart ariaLabel="Session length by month" categoryKey="month" data={data}>
    <Grid horizontal={false} vertical />
    <Ridgeline dataKey="minutes" label="Sessions" />
    <RidgelineXAxis formatValue={formatMinutes} />
    <RidgelineYAxis />
    <RidgelineTooltip />
  </RidgelineChart>
);

Anatomy

A ridgeline has one series. The chart gives each category a row, and the Ridgeline draws a ridge in every row from the same value column.

<RidgelineChart categoryKey="month" data={data} overlap={1.6}>
  <Grid horizontal={false} vertical />
  <Ridgeline dataKey="minutes" fill="var(--chart-1)" label="Sessions" />
  <RidgelineXAxis />
  <RidgelineYAxis />
  <RidgelineTooltip />
</RidgelineChart>
  • RidgelineChart: One row per category, with bins and overlap shaping the ridges.
  • Grid: Guide lines along the value axis. Use vertical.
  • Ridgeline: The value column, smoothed into a density ridge per category.
  • RidgelineXAxis: Values along the bottom.
  • RidgelineYAxis: Category names, each at its ridge's baseline.
  • RidgelineTooltip: Median, middle half and count for the hovered ridge.

Overlap and smoothing

overlap is a ridge's peak height in rows. The default, 1.6, lets each ridge rise well into the row above it. Bring it down toward 1 when you need to read each ridge on its own.

bins (32) sets how finely each profile is counted before it's smoothed. Every ridge is scaled to its own peak, so heights compare shapes, not counts.

One color or one per row

Give the Ridgeline a fill and every ridge uses it. Leave fill off and each row takes the next of --chart-1 to --chart-5, starting over after five.

Preview width

Customization

The kit is in your project, in components/ui/charts/: your framework's components over a shared core/. Change a default there and every chart picks it up.

className goes on the chart's container, so size and spacing are utility classes.

The tooltip's content gets the hovered ridge as point: its category, color, count, min, q1, median, q3 and max. Return TooltipContent for the default panel's look.

strokeWidth on the Ridgeline sets each outline (1.5 px).

<RidgelineTooltip
  content={({ point }) => (
    <TooltipContent
      rows={[
        { color: point.color, label: "Median", value: `${point.median} min` },
        { color: point.color, label: "Longest", value: `${point.max} min` },
      ]}
      title={point.category}
    />
  )}
/>

Where a part renders content of its own, you pass it in. In React:

  • RidgelineTooltip: content={({ point, index }) => …}

Loading state

While status is "loading", skeleton ridges fill the rows and the row labels stay, so the layout doesn't jump when data arrives. loadingLabel adds a line of text. On "ready" the real ridges grow in.

Without any rows yet, render <RidgelineChartLoading />. It draws five skeleton rows.

Preview width

Animation

Ridges grow up from their baselines, top row first, over animationDuration (1100 ms). animate={false} on the Ridgeline draws them in place.

Changed data reshapes each ridge over 500 ms instead of replaying the entrance. Reduced motion skips both.

Theming

Every color in the kit is one of your theme's tokens or a mix of them, except --chart-positive, a fixed green. A preset or the .dark class restyles the chart, and overriding a token in your CSS changes it everywhere.

Each ridge is filled with its color mixed 28% into --chart-background, under an outline in the full color. The fill is opaque, so a ridge hides the parts of the ones behind it.

TokenDefaultPaints
--chart-1your theme'sthe first series
--chart-2your theme'sthe second series
--chart-3your theme'sthe third series
--chart-4your theme'sthe fourth series
--chart-5your theme'sthe fifth series
--chart-background--carddot halos, the gaps between stacked marks
--chart-grid--bordergrid lines
--chart-label--muted-foregroundtick labels
--chart-tooltip-background--popoverthe tooltip panel
globals.css
:root {
  --chart-background: var(--background);
  --chart-grid: var(--muted);
}

Accessibility

The chart is an image named by ariaLabel ("Ridgeline plot" by default). A ridgeline is usually about a trend across the rows, such as sessions getting longer each month, so say that in ariaDescription.

Tab
Moves focus to the chart and shows the top ridge.
Arrow Down
Moves to the next ridge down. ArrowRight does the same.
Arrow Up
Moves to the ridge above. ArrowLeft does the same.
Home
Jumps to the top ridge.
End
Jumps to the bottom ridge.

API reference

RidgelineChart

PropType
categoryKeystring

Key of the column naming each row's category: one ridge per category, top to bottom in first-seen order.

domain?readonly [number, number]

The value axis range [min, max]. Defaults to the observations' extent, rounded to nice values.

bins?number

How many bins each ridge's profile is counted in across the value range (then smoothed and scaled to its peak).

Default
32
overlap?number

A ridge's peak height in rows: above 1, each ridge rises into the rows above it.

Default
1.6
datareadonly DistributionRow[]

The observations, one object per row. Each series reads its dataKey column; rows without a finite number there are skipped.

aspectRatio?string

Width to height ratio of the chart, for example "2 / 1" or "16 / 9".

Default
"2 / 1"
margin?Partial<ChartMargin>

Space around the plot in pixels, per side. Each side defaults to fit the chart's axes.

Type
Partial<ChartMargin>
animationDuration?number

Duration of the entrance in milliseconds.

Default
1100
ariaLabel?string

Accessible name of the chart. Defaults to its kind, for example "Histogram" or "Box plot".

ariaDescription?string

Accessible description of the chart.

status?ChartStatus

"loading" draws a shimmering skeleton shaped like the chart in place of its marks and ignores the pointer; switching to "ready" plays the entrance. Switching back to "loading" fades the marks out first.

Default
"ready"
loadingLabel?string

Text shown centered over the plot, with a shimmer, while status is "loading". Nothing is shown when it is unset or empty.

className?string

Class names added to the chart's container.

style?CSSProperties

Inline styles for the chart's container.

children?ReactNode

The chart's parts: its series, Grid, axes and tooltip.

Ridgeline

PropType
strokeWidth?number

Width of each ridge's outline in pixels.

Default
1.5
dataKeystring

Key of the numeric column this series reads from each row.

label?string

The series' name in the tooltip and legend. Defaults to dataKey.

fill?string

Fill colour. Defaults to the series' palette colour, var(--chart-1) for the first.

stroke?string

Outline colour. Defaults to the fill.

fadedOpacity?number

Opacity of the other items while one is hovered (and of the other series while a legend row is).

Default
0.3
animate?boolean

Play the entrance.

Default
true

Grid

PropType
horizontal?boolean

Show horizontal grid lines.

Default
true
vertical?boolean

Show vertical grid lines.

Default
false
numTicksRows?number

Number of horizontal grid lines. Ignored when rowTickValues is set.

Default
5
numTicksColumns?number

Number of vertical grid lines.

Default
10
rowTickValues?number[]

Explicit y values for the horizontal grid lines. Overrides numTicksRows.

stroke?string

Color of the grid lines.

Default
"var(--chart-grid)"
loadingStroke?string

Grid color while the chart is loading. Falls back to stroke.

strokeOpacity?number

Opacity of the grid lines.

Default
1
strokeWidth?number

Width of the grid lines in px.

Default
1
strokeDasharray?string

Dash pattern of the grid lines.

Default
"4,4"
highlightRowValues?number[]

Y values of horizontal lines drawn with the highlight styling, for example a zero baseline.

highlightRowStroke?string

Color of the highlighted rows.

Default
"var(--chart-foreground-muted)"
highlightRowStrokeOpacity?number

Opacity of the highlighted rows.

Default
1
highlightRowStrokeWidth?number

Width of the highlighted rows in px.

Default
1
highlightRowStrokeDasharray?string

Dash pattern of the highlighted rows.

Default
"0"
fadeHorizontal?boolean

Fade the horizontal lines toward transparent at the left and right edges.

Default
true
fadeVertical?boolean

Fade the vertical lines toward transparent at the top and bottom edges.

Default
false
hideHorizontalEdgeLines?boolean

Drop the first and last horizontal line (kept when two or fewer remain).

Default
false
hideVerticalEdgeLines?boolean

Drop the first and last vertical line (kept when two or fewer remain).

Default
false
shimmer?boolean

While the chart is loading, sweep a bright band across the grid.

Default
false
shimmerStroke?string

Color of the shimmer band.

Default
"color-mix(in oklch, var(--bkm-foreground) 68%, transparent)"
shimmerSpeed?number

Speed multiplier of the shimmer sweep. 2 is twice as fast.

Default
1

RidgelineXAxis

PropType
numTicks?number

Target number of tick labels on a value axis.

Default
5
formatLargeNumbers?boolean

Abbreviate values of 1000 and above as thousands, for example 2k or 1.5k. Ignored when formatValue is set.

Default
true
formatValue?(value: number) => string

Formats a value tick into its label, for example (value) => \${value} ms\``.

Type
(value: number) => string

RidgelineYAxis

PropType
numTicks?number

Target number of tick labels on a value axis.

Default
5
formatLargeNumbers?boolean

Abbreviate values of 1000 and above as thousands, for example 2k or 1.5k. Ignored when formatValue is set.

Default
true
formatValue?(value: number) => string

Formats a value tick into its label, for example (value) => \${value} ms\``.

Type
(value: number) => string

RidgelineTooltip

PropType
content?(context: DistributionTooltipContext<RidgelinePoint>) => ReactNode

Replaces the default panel body (a title over one row per value) with your own content for the hovered item.

Type
(context: DistributionTooltipContext<RidgelinePoint>) => ReactNode
formatValue?(value: number) => string

Formats the values the default body shows. Defaults to the chart's value axis formatValue, else en-US numbers.

Type
(value: number) => string

RidgelineChartLoading

PropType
aspectRatio?string

Width to height ratio of the placeholder, for example "2 / 1".

Default
"2 / 1"
margin?Partial<ChartMargin>

Space around the plot in pixels, per side.

Type
Partial<ChartMargin>
label?string

Text shown centered over the skeleton, with a shimmer. Nothing is shown when it is unset or empty.

className?string

Class names added to the placeholder's container.

Default
""

Examples

3 examples on React, each live with its code and its own install command.

All 3 ridgeline plot examples