Skip to main content
A lollipop compares one value per category, like a bar, as a head at the value and a stem dropped to zero. It uses less ink per category than a bar, so it holds up when there are many categories of similar size, such as a ranking across countries.
The lollipop ships as its own package, @graphysdk/geom-lollipop, on a 0.x version line. While it is on 0.x, a minor release may change its aesthetics, style parts or look; pin a caret range (^0.1.0) to take only patches. Tell us what works and what doesn’t on Discord.

​
Install

It peer-depends on @graphysdk/react and nothing else. Register the plugin once with createGraphyKit, which adds kit.geom.lollipop() and binds kit.GraphProvider to the same plugin:

​
One value per category

Map the category to x and the value to y:
A stem encodes length, as a bar does, so the value axis always holds zero. A negative value hangs its stem below the baseline:

​
Grouped lollipops

Map a group to color, with one row per lollipop. Each category’s lollipops spread across its band, as a grouped bar’s do, and every stem takes its head’s colour from the scale:
Pass position: 'identity' to stand a category’s lollipops on one line instead. A stack is not supported: a stacked stem would start on the head below it. When each group is its own column, reshape it to long with kit.transform.reshape(), as for a dumbbell.

​
Horizontal

Add kit.coord.flip(), as for a horizontal bar. The categories move to the vertical axis and the stems lie across.

​
Styling

The heads are the layer’s observations and style through the kind’s own builder. The stem is a part beside them, with a builder of its own:
An entry that names no part, such as style.geom({ fill: 'navy' }), styles the heads like any other geom’s observations and never the stems. A stem entry’s stroke wins over the scale, so one entry gives every stem a neutral colour under coloured heads. A stem entry’s where is tested against the lollipop it holds up.

​
Hover and highlight

Hovering a category emphasises all its lollipops. The tooltip lists every group in legend order, with the head nearest the cursor marked in place. A press anywhere along a stem takes its category. A highlight raises each matched lollipop whole, stem and head together:

​
Data labels

dataLabels.showDataLabels prints every head’s value beside it. Under the default position: 'auto' each label continues the stem past its head: above a rising lollipop, below a hanging one. An explicit position puts every label on the side justify names.
The label prints the head’s y, formatted as the value axis formats it; map label to print another column instead. showStackTotals and showCategoryLabels are bar settings and a lollipop places neither.

​
Not yet supported

  • The editor’s chart-type picker and the chart agent. In editable mode the lollipop renders, hovers, selects and takes annotations on its heads, but it is authored in code.
  • Polar lollipops. A radial lollipop is not drawn yet.
  • Aggregation. Duplicate rows for one category and group all draw; aggregate them first with transform.aggregate().