Line

<zyna-line>

Multi-series area-line chart. Add any number of series — each gets its own line, fill, legend swatch, and annotation markers.

Demo

Libya — MEB Basket vs Parallel FX Index (2018=100)

html 
<zyna-line
  data='[
    {
      "label": "MEB Basket",
      "values": [
        {"x": "2019", "y": 101},
        {"x": "",     "y": 104},
        {"x": "2020", "y": 109},
        {"x": "",     "y": 105}
      ]
    },
    {
      "label": "FX Index",
      "color": "#4BBFA8",
      "values": [
        {"x": "2019", "y": 100},
        {"x": "",     "y": 99},
        {"x": "2020", "y": 92},
        {"x": "",     "y": 89}
      ]
    }
  ]'
  annotations='[
    {"series": 0, "x": "2020", "label": "109", "direction": "up"},
    {"series": 1, "x": "2020", "label": "89",  "direction": "down"}
  ]'
  y-min="80"
  y-max="120"
  tension="0"
  style="display:block;width:100%">
</zyna-line>
Attribute Type Default Description
data JSON array — Array of { label?, color?, values: [{ x, y }] }. Set x to "" to suppress a tick label. Series are stacked bottom-to-top in array order.
annotations JSON array — Array of { series, x, label?, direction? }. series is the 0-based index of the target series. direction = "up" or "down" renders a triangle marker.
tension 0–1 0 Curve smoothing. 0 = straight line segments. 1 = maximum smoothing (Catmull-Rom spline). Values between 0 and 1 interpolate gradually.
y-min number auto Explicit y-axis lower bound. Auto-derived from data when omitted.
y-max number auto Explicit y-axis upper bound. Auto-derived from data when omitted.
ticks number 4 Number of y-axis tick marks and horizontal grid lines.
height number — Explicit height in px. Auto-derived from width (50% ratio) when omitted.
theme dark | light dark Controls grid line and label colour scheme.

Usage Tips

  • Series are ordered bottom-to-top: the first series in the array forms the base layer; each subsequent series sits on top of it, filling down to the series below
  • Set x to "" on intermediate points to suppress crowded x-axis labels — label only key periods
  • All series should have the same number of data points; the x scale is based on array position (index), not the x label value
  • Annotations reference series by 0-based index — "series": 0 targets the first series in your data array
  • Omit color on a series to use the built-in palette: gold → teal → purple → orange → blue → green
  • Use y-min and y-max to anchor the axis to a meaningful baseline (e.g. an index base year)