Lollipop

<zyna-lollipop>

Horizontal lollipop chart. A lighter alternative to bar charts: each item is a thin stem from zero to the value, capped with a circle. The first item is highlighted in the accent colour.

Demo

Libya — top cities by aid received (USD millions)

HTML 
<zyna-lollipop
  data='[
    {"label":"Tripoli",   "value":1040},
    {"label":"Al Jufara", "value":108},
    {"label":"Sabha",     "value":51},
    {"label":"Benghazi",  "value":45}
  ]'
  theme="dark"
></zyna-lollipop>
Attribute Type Default Description
dataJSON array—Array of { label, value } objects. Sort descending for best results.
colorhexvar(--zyna)Accent colour for the highlighted item.
themedark | lightdarkControls background and text colour scheme.
highlightstringfirst itemLabel of the item to emphasize in accent colour. Defaults to the first item.
muted-colorhex#7A6230Colour for non-highlighted stems, dots and labels. Defaults to muted gold-grey.
heightnumber—Explicit height in px. Auto-derived from number of rows when omitted.
show-valuesbooleantrueSet to "false" to hide value labels at the end of each stem.
label-formatstring—D3-style number format (e.g. $,.0f, .1%, ,.2f). Raw value shown when omitted.
ticksnumber5Number of x-axis tick marks.

Usage Tips

  • Sort data descending. The ranking is the primary message.
  • Put the most important item first so it gets the accent colour automatically
  • Keep category labels short (under 20 characters)
  • Don't use for time series. The horizontal axis implies ranking, not time.
  • Don't use more than ~15 items. Stems become too dense.