Tension

<zyna-tension>

Ranked before/after comparison. Two ranked columns are joined by curved connectors; each connector's slope and colour encode the rank change — rising in the success colour, falling in danger, holding flat in muted. Stroke width scales with the size of the move, so the crossing lines are where the story is.

Demo

Donor ranking · 2023 → 2024

HTML 
<zyna-tension
  highlight="UK"
  data='[
    {"label":"EU","before":1,"after":2}, {"label":"USA","before":2,"after":1},
    {"label":"UK","before":3,"after":5}, {"label":"Japan","before":4,"after":3},
    {"label":"Gulf","before":5,"after":4},{"label":"Nordic","before":6,"after":6}
  ]'
></zyna-tension>
Attribute Type Default Description
dataJSON—Array of {label, before, after}. In the default rank mode these are ranks (1 = top).
rank-byrank | valuerankTreat before/after as ranks, or as raw values from which ranks are computed (higher = top).
highlightstring—Label to spotlight; every other connector dims and the chosen one glows.
colorstringvar(--zyna)Accent used for the highlight glow.
themedark | lightdarkControls text and badge colour scheme.
heightnumberautoExplicit height in px. Auto-derived from item count when omitted.

Usage Tips

  • Use rank-by="value" when your data is raw numbers — the chart ranks them for you.
  • Set highlight to walk an audience through one item's journey without hiding the field.
  • Colour and slope both encode direction, and stroke width encodes magnitude — the biggest movers read first.
  • Best for 4–10 items. Longer lists turn the connectors into noise; filter to the movers that matter.