Charts/Category charts
Lollipop
<Lollipop /> · 10 examples
A bar chart with the bars replaced by a thin stick and a dot, for many items or long names.
Overview
A bar chart with forty bars is a wall. The ink adds up, the bars crowd one another, and the eye drifts off to find the legend, which is also a wall. The lollipop chart is what you get when you keep the one thing a bar encodes (a length from zero) and throw out most of the paint.
Each item gets a thin line from the baseline and a dot at the end. The dot is where the value is, and the stick is just there to remind you it started at zero. The result carries the same information as a bar chart with far less visual weight, so you can fit twice as many items and still read the labels.
It is sometimes accused of being a bar chart in a nicer coat, and that is more or less true. The coat matters. Past about fifteen items, a stack of fat bars turns into a pattern, and a pattern is a bad thing to read a number from.
Props
API
<Lollipop data={sales} name={|s: &Sale| s.region} value={|s: &Sale| s.total} sort={SortOrder::Descending} />| Prop | Type | Default |
|---|---|---|
value | Fn(&T) -> f64 | required |
color | colour | the first series colour |
point_size | f32, pixels | 12. |
show_values | bool | false |
horizontal | true |
A thin stem from zero to a dot at the value.
Run them
10 examples
Press Run to load an example into the live render at the top of the page. Open one to read its code.
How to read it
- 01Read position along the value axis, not stick length. The dot is the number.
- 02Run your eye down the dots. With a sorted chart you are looking at the shape of the distribution: a steep start and a long tail is the usual story.
- 03Look for gaps between neighbours. A big jump between two adjacent items is where the interesting break is.
- 04Hover a dot for the exact name and value.
When to use it, and when not to
Reach for it when
- You have many items, say 15 to 60, and a bar chart would be a dense block of colour.
- Category names are long: product names, file paths, survey questions. Horizontal sticks leave them room.
- You want a ranked list that reads as a ranking: sort it descending and the dots form a clean slope.
Skip it when
- You have three or four items. A plain bar is bolder and perfectly readable.
- The values can be negative and large. A stick from zero to a negative dot works, but the picture gets confusing quickly. A back-to-back or waterfall is often clearer.
- You need to compare two values per item. Use a dumbbell, which draws both on one stick.
- The axis does not start at zero and you cannot make it. The stick implies a baseline, so a cut axis turns the length into a lie.
The math behind it
A bar, reduced
Given rows with names and values , the chart orders them by sort and assigns each one a slot along the category axis. With sort set to none the order is yours; ascending or descending sorts by .
The value axis is an ordinary linear axis. The stick is a bar of width 5% of its slot, capped at 2 pixels, drawn from the baseline to . The dot is a marker of point_size pixels (12 by default) at the same value, in the same colour.
Why the stick stays
A dot alone is a dot plot), and it is honest about position but loose about the baseline. The stick brings back the baseline, which is what makes the length comparable between items. It is hidden from the legend, because it is a decoration for the dot, not a series of its own.
The chart defaults to horizontal sticks (horizontal={true}) so that long names run down the left side and can be read without tilting your head. Value labels next to the dots are off by default. Turn them on with show_values.
Real life usage
Fifty-two ways to be late
Hana worked in operations for a regional rail operator, and her quarterly job was to explain to the board which stations caused the most delay minutes. There were fifty-two stations. She had tried a bar chart. It was a very accurate bar chart, in the sense that it was accurate and nobody could read it.
The station names were the real trouble. Names like "Northgate Interchange (Platform 4 Terminal)" had to be rotated to fit under their bars, and rotated text is read exactly as often as it deserves to be. The chairman had been seen tilting his head at the slide like a spaniel.
What Hana wanted was the ranking: which dozen stations account for most of the delay, and where does it fall off. The thickness of the bars was working against her, because fifty-two thick bars look like a barcode.
She switched to <Lollipop> with the station name and delay minutes, sorted descending, horizontal by default. The names now ran down the left in normal type. The dots slid from top left to bottom right along a curve that anyone could read in two seconds.
The curve had a shoulder. The first eight stations were above 4,000 minutes each, the next forty-four mostly below 900. Hana put the figure in the deck with a single sentence above it and no further slides about the long tail.
The board funded platform work at six of the top eight, and the fourth-ranked station turned out to be waiting on a points failure that had been logged in a ticket nobody opened. Delay minutes on those eight fell by about a third over the next two quarters.
A good chart makes the long tail look as short as it deserves to. This one let the tail trail off gracefully instead of shouting.
Pitfalls
- Truncated axes. The stick suggests a zero baseline. If the axis starts at 40, a dot at 60 looks twice as far as a dot at 50 when it is only 1.5 times.
- Unsorted lists. Alphabetical order hides the ranking. Pass
sortunless the order itself means something, like months. - Dots that are too big. At 12 pixels the dots can touch in dense charts. Reduce
point_sizeinstead of increasing the chart height. - Using it for two series. There is only one series per chart. For before and after, use dumbbell or slope.
From around the web