Ridgeline Chart

Component 26

About

A ridgeline (joy) plot that stacks overlapping smoothed distributions, one per group, so you can compare shapes like seasonal temperatures or response times at a glance; hover lifts a ridge to read its quartiles and switching datasets morphs every curve.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ridgeline Chart to your project and fits it to your theme.

Code

How Ridgeline Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Ridgeline, { type RidgelineSeries } from "@/components/ui/ridgeline";

const MONTHS = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];
const MEANS = [-2, 0, 5, 10, 15, 19, 22, 21, 17, 11, 4, 0];

function gaussian(seed: number) {
  let state = seed;
  return () => {
    state = (state * 1103515245 + 12345) % 2147483648;
    const u = state / 2147483648;
    state = (state * 1103515245 + 12345) % 2147483648;
    const v = state / 2147483648;
    return Math.sqrt(-2 * Math.log(u || 1e-9)) * Math.cos(2 * Math.PI * v);
  };
}

const series: RidgelineSeries[] = MONTHS.map((label, index) => {
  const next = gaussian(index * 97 + 11);
  const values = Array.from({ length: 60 }, () => MEANS[index] + next() * 3.4);
  return { id: label, label, values };
});

export default function RidgelineDemo() {
  return (
    <div className="w-full max-w-xl p-6">
      <Ridgeline
        series={series}
        label="Daily high temperatures in Zurich by month"
        unit="°"
      />
    </div>
  );
}