Kaplan-Meier Chart

Component

About

A survival-curve chart that plots the share of a cohort still "surviving" an event (not yet churned, relapsed, or converted) over time, with confidence bands, censor ticks, median markers, an at-risk table, and a log-rank test across groups.

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

Code

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

Usage.tsx

"use client";

import KaplanMeierChart from "@/components/ui/kaplan-meier-chart";
import type { KaplanMeierChartGroup } from "@/components/ui/kaplan-meier-chart";

/** Seeded, so every render and every visitor sees the same data. */
function rng(seed: number) {
  let a = seed >>> 0;
  return () => {
    a = (a + 0x6d2b79f5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

function cohort(
  seed: number,
  size: number,
  scale: number,
  shape: number,
): KaplanMeierChartGroup["subjects"] {
  const random = rng(seed);
  return Array.from({ length: size }, () => {
    const churn = scale * (-Math.log(Math.max(1e-9, random()))) ** (1 / shape);
    const observed = 2 + random() * 22;
    return churn <= observed
      ? { time: Math.max(0.2, Math.round(churn * 10) / 10), event: true }
      : { time: Math.round(observed * 10) / 10, event: false };
  });
}

const cohorts: KaplanMeierChartGroup[] = [
  { id: "annual", label: "Annual plan", subjects: cohort(3, 180, 34, 1.3) },
  { id: "monthly", label: "Monthly plan", subjects: cohort(5, 220, 13, 0.9) },
];

export default function KaplanMeierChartDemo() {
  return (
    <div className="w-full rounded-xl border bg-card p-6 text-foreground">
      <KaplanMeierChart
        groups={cohorts}
        showConfidence
        timeLabel="Months since signup"
        formatTime={(value) => String(Math.round(value * 10) / 10)}
        label="Share of customers still subscribed by months since signup, by plan"
      />
    </div>
  );
}