shadcn.io is not affiliated with official shadcn/ui
Dumbbell Chart Stats Block for Svelte
Eight roles as rows of two dots joined by a line, hollow for the last pay review and solid for this one, sorted by how far each moved, with the gap and a trend arrow at the row's end and a takeaway sentence beside.
Installation
Overview
A dumbbell chart for Svelte with Ark UI. A split with a hairline divider. At the start, a compact header, "Pay moved up its band in 6 of 8 roles", a takeaway sentence about the role that moved most and a key. At the end, one row per role, sorted from the biggest move up to the biggest move down: the role's name and its two readings, then two dots joined by a line on a shared axis (hollow for the last review, solid for this one, a firmer hairline at the band's midpoint) and the gap, with a trend arrow and a signed number, at the row's end. The positions, the gaps, the sort order and the sentences are computed at module scope from the two readings per role, and the readings are in text, so no number depends on the drawing. The block ends in its rows, so there is no closing rule. On a phone the copy comes first, then the rows. For pay reviews, before-and-after comparisons and any pair of readings per item.
FAQ
How do I use my own readings?
Edit ROLES at the top of the file: a name and the last and now readings for each. Set FROM, TO, MIDPOINT and TICKS to your axis; the axis uses five-point ticks, and the hairlines behind the rows are a gradient sized to match (bg-[length:20%_100%] for five steps), so change it with the number of ticks. The sort order, the gaps, the headline and the takeaway are computed.
Why two kinds of dot?
So the direction reads without colour: the hollow dot is where the role was, the solid one is where it is now, and the line between them is the move. A role that slipped has its solid dot to the start of the hollow one, and its gap has a down arrow and a true minus sign. The arrow shows the way the number moved, so it never mirrors on right-to-left pages.
Is it accessible?
Each row is a list item with a heading for the role, its two readings as text ("88% to 97%") and its signed gap, so the dots only repeat what the text says and are hidden from assistive technology. The key is hidden for the same reason and the figure's caption names the chart. Numbers sit in bdi elements and the plot is forced left to right.
Why does the chart touch the divider and the bottom?
The chart column ends the block: its rows run from the divider to the rail and the last one draws no bottom rule, because the next section's top rule closes it. The divider reaches the top rule, with a + where they meet, and on a phone a rule separates the copy from the rows.