Lollipop Chart

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/lollipop-chart.tsx.

Install the pastetaste component "Lollipop Chart" (lollipop-chart) into this Next.js project and use it.

What it is: Monthly lollipop bars: a thin stem and a dot per period, a value pin that springs to the selected bar while its digits roll. Click, scrub by touch or use the arrow keys.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/lollipop-chart.json
   (it writes components/pastetaste/lollipop-chart.tsx; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { LollipopChart } from "@/components/pastetaste/lollipop-chart" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- data: { label: string; value: number }[] = 12-month sample — One entry per period; the label is printed under the stem.
- value: number — Selected index, for controlled use together with onChange.
- defaultValue: number = last index — Initially selected index when uncontrolled.
- onChange: (index: number, datum: LollipopDatum) => void — Called when the selection changes by pointer or keyboard.
- format: (n: number) => string = toLocaleString('en-US') — Formats the number shown in the pin and read out by screen readers.
- prefix: string = '' — Small prefix before the pinned number, such as a currency sign.
- max: number = largest value + 6% — Top of the scale; set it to share a scale between charts.
- accent: string = var(--pt-accent, #ff4b2b) — Colour of the selected stem and the pin.
- tone: 'light' | 'dark' = 'light' — Ink colours for paper or black grounds; --pt-ink, --pt-muted and --pt-line override them.
- height: number = 240 — Height of the plot area in px; the pin and the labels are added around it.
- label: string = 'Values by period' — Accessible name of the radio group.
- className: string — Extra classes on the root.
- style: CSSProperties — Inline style overrides on the root.

Live preview: https://pastetaste.com/c/lollipop-chart
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 13