Timeline

<zyna-timeline>

Proportional-circle timeline where bubble area encodes value. Annotations appear on a rail above the baseline.

Demo

Libya humanitarian funding 2019–2024 (USD millions)

html 
<zyna-timeline
  data='[
    {"label":"2019", "value":310},
    {"label":"2020", "value":259, "note":"Ceasefire"},
    {"label":"2021", "value":285, "note":"Berlin II"},
    {"label":"2022", "value":419, "note":"Peak Crisis"},
    {"label":"2023", "value":315, "note":"Derna Floods"},
    {"label":"2024", "value":273}
  ]'
  highlight='2022'
  theme='dark'
  style="display:block;width:100%">
</zyna-timeline>
Attribute Type Default Description
data JSON array — Array of { label, value, note? }. label = x-axis, note = annotation.
color hex var(--zyna) Accent colour for the highlighted bubble.
theme dark | light dark Controls background and text colour scheme.
highlight string auto (max value) The label of the item to emphasize in accent colour.
muted-color hex #8A8478 Colour for non-highlighted bubbles, stems and labels.
height number — Explicit height in px. Auto-derived from width when omitted.
show-values boolean true Set to "false" to hide the numeric value label below each bubble.
label-format string — D3-style number format (e.g. $,.0f, .1%, ,.2f). Raw value shown when omitted.

Usage Tips

  • Use highlight to draw attention to the most significant event; defaults to the highest-value point
  • Keep labels short — years, quarters, or 1–2 word event names work best
  • Notes on the rail should be 1–3 words maximum
  • Best for 5–10 data points; fewer than 4 loses the timeline feel, more than 12 gets crowded
  • Don't use for ranked comparison — the horizontal layout implies time order, not magnitude