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 draws less 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

Its only peer dependencies are @graphysdk/react and React. 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 color from the scale:
'dodge' is the default. Pass position: 'identity' to stand a category’s lollipops on one line instead. 'stack' is rejected with UNSUPPORTED_POSITION, since 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 are styled through the geom’s own builder. The stem is a part 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 replaces the scale color, so one entry gives every stem a neutral color under colored heads. A stem entry’s where is tested against the lollipop it holds up.

Hover and highlight

Hovering a category emphasizes 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 annotate 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; coord.polar() is rejected with UNSUPPORTED_COORD.
  • Aggregation. Duplicate rows for one category and group all draw; aggregate them first with transform.aggregate().