ztd chartsHome

Distribution · Advanced

Ridgeline

Group distributions as overlapping, stacked curves.

Open in playground
Use when
Comparing distributions across 5 to 12 groups, such as delivery time by region
Avoid when
3 or fewer groups (a box plot is simpler)

Try it

25

Ridgeline

Delivery time by region
RidgelineRidgeline. 7 groups: Seoul median 17h, Gyeonggi median 21.4h, Gangwon median 35.3h, Chungcheong median 27.8h, Jeolla median 29.2h, Gyeongsang median 28h, Jeju median 46.8h.SeoulGyeonggiGangwonChungcheongJeollaGyeongsangJeju
Ridgeline data
Seoulmedian 17h (120 values)
Gyeonggimedian 21.4h (120 values)
Gangwonmedian 35.3h (120 values)
Chungcheongmedian 27.8h (120 values)
Jeollamedian 29.2h (120 values)
Gyeongsangmedian 28h (120 values)
Jejumedian 46.8h (120 values)
Only Jeju has a long tailAdvanced

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Variants

Named looks for this chart. Each one is the example above with a few options or fields changed. The CLI (ztd-charts example ridgeline --variant <id>) and the MCP server know the same names.

Sorted by median

Delivery time by region
Sample data

Less overlap

Delivery time by region
Sample data

More overlap

Delivery time by region
Sample data

Code

RidgelineChart.tsx
import { ChartCard, RidgelineChart } from "ztd-charts";

const data = [
  {"region":"Seoul","hours":16.6},
  {"region":"Seoul","hours":24.4},
  {"region":"Seoul","hours":20.3},
  {"region":"Seoul","hours":15.8},
  {"region":"Seoul","hours":20.4},
  {"region":"Seoul","hours":17.6},
  // … 834 more rows
];

export function Example() {
  return (
    <ChartCard number="25" title="Ridgeline" subtitle="Delivery time by region" takeaway="Only Jeju has a long tail" level="advanced" replay>
      <RidgelineChart
        data={data}
        group="region"
        value="hours"
        unit="h"
      />
    </ChartCard>
  );
}

Props

<RidgelineChart> takes these props. Rows marked Common work the same on every chart.

27 props

Prop
dataRequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]
groupRequiredGroup fieldstring | (d, i) => string
valueRequiredValue fieldstring | (d, i) => number
overlapHow much the curves overlapnumberDefault 1.5
bandwidthKDE bandwidthnumber
sortSort order"none" | "median"Default "none"
heightCommonHeight in px. Without it, each chart picks a default that fits its widthnumber
widthCommonFixed width in px. Without it, the chart fits its parentnumber
highlightCommonItem to highlight. An index, a name, an array, or "max" | "min" | "first" | "last" | "none"number | string | (number|string)[] | "max" …
formatCommonValue format. "number" | "integer" | "percent" (values are already percents: 42 → "42%") | "ratio" (0.42 → "42%") | "compact" | "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) | "decimal" or Intl.NumberFormat options"number" | "percent" | "compact" | …
unitCommonUnit appended to values. For example "%" or "ms"string
localeCommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault "en-US"
animateCommonEntry and update animationbooleanDefault true
durationCommonAnimation length (ms)number
easingCommonMotion curve"spring" | "easeOut" | "easeInOut" | "linear"Default "spring"
staggerCommonDelay between items as they enter (ms)number
reducedMotionCommon"auto" follows the OS setting. true always turns motion offanyDefault "auto"
animateOnViewCommonPlay when the chart scrolls into viewbooleanDefault true
showLabelsCommonLabels drawn on the chart (values and names)booleanDefault true
tooltipCommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault true
syncIdCommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring
ariaLabelCommonName for screen readersstring
descriptionCommonDescription for screen readers. Built from the data when omittedstring
onHoverCommonRuns when hover or keyboard focus moves to another item(e: ChartEvent | null) => void
onClickCommonRuns on click, Enter or Space(e: ChartEvent) => void
replayKeyCommonReplays the entry animation when it changesstring | number
themeCommonChanges theme tokens for this chart onlyPartial<ChartTheme>

Also in Distribution