Rupture

<zyna-rupture>

Threshold-breach area chart. Below the threshold the fill is calm and brand-coloured; at the exact crossing a jagged seam splits the fill, and past it the fill and stroke shift to danger with a hot glow. The chart performs the alarm rather than annotating it.

Demo

Response latency vs SLA

HTML 
<zyna-rupture
  threshold="200"
  threshold-label="SLA 200ms"
  data='[
    {"x":"9:00","y":120}, {"x":"10:00","y":165}, {"x":"11:00","y":210},
    {"x":"12:00","y":320}, {"x":"13:00","y":240}
  ]'
></zyna-rupture>
Attribute Type Default Description
dataJSON—Array of {x, y} (single series). x is the axis label, y is tested against the threshold.
thresholdnumberrequiredThe breach level. The fill fractures exactly where the series crosses it.
threshold-labelstringvalueCaption drawn on the threshold line.
directionabove | belowaboveBreach when exceeding (above) or when dipping under (below, e.g. funding levels).
colorstringvar(--zyna)Accent for the calm segment. The breach segment always uses the danger token.
themedark | lightdarkControls text and reference-line colour scheme.
heightnumberautoExplicit height in px. Auto-derived from width when omitted.
label-formatstring—D3-style number format for the threshold label value (e.g. $,.0f).

Usage Tips

  • Use direction="below" for floors — funding, capacity, reserves — where dipping under is the alarm.
  • The seam marks the interpolated crossing point, not the nearest data point, so it lands exactly on the threshold.
  • One series per chart. For multiple series against a shared limit, stack several rupture charts.
  • The breach colour is the danger token, so it re-tunes automatically with the active genre.