Cohort retentionFree
Do newer cohorts stick around longer?
npx shadcn@latest add https://beautifulcharts.dev/r/cohort-retention.jsonCode
"use client";
import { CohortRetentionBlock } from "@/components/beautiful-charts/blocks/instrument/cohort-retention";
// The stats and copy recompute from your rows. Leave data out to see the sample.
export function Dashboard() {
return <CohortRetentionBlock />;
}
Props
data
SankeyData
Your rows. Missing values are
nulland stay gaps; with no rows every stat shows a dash. Leave it out to see the sample.stats
ChartStat[] | false
Replace the computed stats with your own, or hide them with
false.footer
ReactNode | false
Replace the footer line, or hide it with
false.
| Prop | Type | Description |
|---|---|---|
| data | SankeyData | Your rows. Missing values are null and stay gaps; with no rows every stat shows a dash. Leave it out to see the sample. |
| stats | ChartStat[] | false | Replace the computed stats with your own, or hide them with false. |
| footer | ReactNode | false | Replace the footer line, or hide it with false. |
Every heatmap prop works too, so you can restyle it without touching the source.
Accessibility, keyboard and motion
- Pointer
- Hover a cell to show its row, column and value; click pins it. Arrow keys move through the grid.
- Keyboard
- Tab lands once on the grid. Left and Right move between columns, Up and Down between rows, Home and End jump to the ends of a row, Enter or Space pins, Escape clears.
- Screen readers
- Every move is announced as a sentence, not coordinates. "Show data table" opens the numbers as a real table, and missing values stay empty, never zero.
- Motion
- Cells fade in across the grid, so the pattern builds. With reduced motion everything appears settled at once, and nothing depends on the motion to be read.