Pulse Sequence

<zyna-pulse>

Stacked ECG / seismograph tracks — one horizontal track per entity, each with its own zero baseline. Because every track shares the same x-axis, simultaneous events line up vertically: the chart is built for "what happened everywhere at 14:02?". Traces carry a soft same-colour glow, strongest under the Phosphor genre.

Demo

System signals · 60s window

HTML 
<zyna-pulse
  x-labels='["0","","","15","","","30","","","45",""]'
  marker='[{"x":"30","label":"deploy"}]'
  data='[
    {"label":"CPU", "values":[1,3,2,8,3,2,1,2,9,2,1]},
    {"label":"MEM", "values":[2,2,3,3,4,4,5,5,6,6,5]},
    {"label":"NET", "values":[0,-2,4,-1,3,-3,2,7,-2,1,0]},
    {"label":"DISK","values":[1,1,2,1,6,1,1,2,1,1,2]}
  ]'
></zyna-pulse>
Attribute Type Default Description
dataJSON—Array of {label, values, color?}. Each entity becomes one track; negative values dip below its baseline.
x-labelsJSON—Array of point labels along the shared x-axis. "" suppresses that label.
amplitudenumberautopx of vertical swing per track. Scales to the track height when omitted.
markerJSON—Array of {x, label?} vertical event rules spanning every track. x matches an x-label or a 0-based index.
colorstringvar(--zyna)Fallback accent for tracks without their own color.
themedark | lightdarkControls text and baseline colour scheme.
heightnumberautoExplicit height in px. Auto-derived from track count when omitted.

Usage Tips

  • Keep the values arrays the same length so events line up vertically — that alignment is the whole point.
  • Drop a marker on a deploy, an incident, or a policy change to read every track's reaction at once.
  • Give each track its own color when the signals are unrelated; share one accent when they're a family.
  • Best for 3–8 tracks. Beyond that the stack gets short — split into two charts instead.