RetentionCurve

RetentionCurve answers "do they stay — and does the curve plateau?". It draws a step line (cohort periods are discrete) on a scale locked to 0–100% — the full range is the honest frame for a share, so the floor is never truncated to manufacture drama. When the curve flattens, a dotted plateau marker appears; a peer curve can ride behind as a subordinate ghost.

Install

import { RetentionCurve } from "@microcharts/react/retention-curve";// cohort — real values under “Sample data” below<RetentionCurve data={cohort} unit="week" title="W12 cohort" />

// a weekly cohort that decays then plateaus around 38%const cohort = [1, 0.72, 0.55, 0.47, 0.42, 0.4, 0.39, 0.385, 0.382, 0.38, 0.379, 0.378];

Try it

When to use it

• Good for — a cohort retention curve in a KPI card, your decay vs an industry benchmark, spotting whether retention plateaus (or keeps leaking).
• Avoid for — a continuous signal (Sparkline) or one-number retention (Progress / Delta).

Sizing

Variants

Edge cases

A single period is too short for plateau detection (the window needs at least four finite points) and renders as a single step with no visible line. data accepts either a 0–1 fraction or a 0–100 percent series — whichever the max value implies — so a raw percent export renders identically to its fraction form without a manual divide. With a locale, the percent label and every announced number follow that locale's own formatting.

Four homes

Why this default

Step line plus the full 0–100% range, because retention is a discrete share, not a continuous signal — a smoothed curve implies between-period values that never existed, and a truncated floor exaggerates or hides the drop. The plateau marker appears only when the mean period-over-period change over the tail falls below half a point — never as decoration — and the benchmark stays a subordinate dashed ghost, never a second competing line.

Accessibility

The accessible name states the final retention and, when detected, the plateau — "38% retained after 10 weeks; curve plateaus from week 6.". The interactive entry steps the periods and announces each period's retention alongside the benchmark's.

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.