Lollipop Ranking Chart React component
A ranked list of thin lollipops that reorders itself: switch period and the rows glide to their new places, with each one showing how far it climbed or fell.
About the Lollipop Ranking Chart component
Lollipop Ranking Chart keeps a ranking easy to read and shows how it changes. Thin sticks and round heads take far less ink than bars, so a long list stays calm, and the leader alone carries the accent.
Switch period and the rows glide past each other to their new places. A small marker on each row shows how many places it climbed or fell, so the story of the quarter is there at a glance.
When to use it
Use it for leaderboards and top lists that change over time, like feature requests, top products, teams or regions.
For two or three categories, a simple bar chart is clearer.
Installation
Add the Lollipop Ranking Chart component to your project with the shadcn CLI. It lands in components/lollipop-ranking-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/lollipop-ranking-chartProps
<LollipopRankingChart /> accepts 10 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Customer requests" |
| subtitle | string | "What people ask for most, by quarter." |
| items | { label: string; values: number[] }[] | ITEMS |
| periods Oldest first. Rank changes compare each period with the one before it. | string[] | PERIODS |
| defaultPeriod Index of the period shown first. Defaults to the latest. | number | — |
| color Colour of the leader's head. | string | — |
| rowHeight Height of each row, in px. | number | 34 |
| formatValue | (value: number) => string | FORMAT |
| onPeriodChange | (period: string) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Customer requests"
- subtitlestringDefault: "What people ask for most, by quarter."
- items{ label: string; values: number[] }[]Default: ITEMS
- periods
Oldest first. Rank changes compare each period with the one before it.
string[]Default: PERIODS - defaultPeriod
Index of the period shown first. Defaults to the latest.
number - color
Colour of the leader's head.
string - rowHeight
Height of each row, in px.
numberDefault: 34 - formatValue(value: number) => stringDefault: FORMAT
- onPeriodChange(period: string) => void
Lollipop Ranking Chart FAQ
- What order should periods go in?
- Oldest first. Each period's rank change compares it with the one before.
- Does the scale change between periods?
- No. It fits the largest value across every period, so a stick only moves when its own value does.
- How many rows can it hold?
- Any number, since each row has a fixed height. Around ten is the most that still reads as a ranking.
- Does it work with a keyboard?
- Yes. Each row can be focused and reads out its rank, value and change.
