154Line & area

Change over time. Lines are 2px with round joins, markers are ≥8px dots ringed in surface color, and the area fill is the hue at 10% — a wash, never a block.

Line — single series

End-dot + end-label carry the latest value; the y-axis carries the rest. The line draws itself on load.

Active learnerslast 8 weeks

W1W2W3W4W5W6W7W8

markup

<figure class="ns-chart">
  <div class="ns-chart__head"><span class="ns-chart__title">Active learners</span><span class="ns-chart__sub">last 8 weeks</span></div>
  <svg class="ns-chart__svg" viewBox="0 0 320 120" role="img" aria-label="Active learners, rising from 40 to 96 over 8 weeks">
    <line class="ns-chart__gridline" x1="0" y1="10" x2="320" y2="10"/>
    <line class="ns-chart__gridline" x1="0" y1="55" x2="320" y2="55"/>
    <line class="ns-chart__baseline" x1="0" y1="100" x2="320" y2="100"/>
    <polyline class="ns-chart__line ns-chart__line--draw" data-c="1" pathLength="1" points="10,80 52,70 94,74 136,58 178,62 220,44 262,38 300,22"/>
    <circle class="ns-chart__dot" data-c="1" cx="300" cy="22" r="4"><title>W8 · 96</title></circle>
    <text class="ns-chart__ref-label" x="308" y="25">96</text>
  </svg>
  <div class="ns-chart__x"><span>W1</span><span>W2</span><span>W3</span><span>W4</span><span>W5</span><span>W6</span><span>W7</span><span>W8</span></div>
</figure>

Multi-series

Slots 1 and 2, legend mandatory. Dots mark real data points; the surface ring keeps them legible where lines cross.

Track progressavg % complete

Admin
Developer

JanFebMarAprMayJun

markup

<figure class="ns-chart">
  <div class="ns-chart__head"><span class="ns-chart__title">Track progress</span><span class="ns-chart__sub">avg % complete</span></div>
  <ul class="ns-chart__legend">
    <li class="ns-chart__key" data-c="1"><span class="ns-chart__swatch ns-chart__swatch--line"></span>Admin</li>
    <li class="ns-chart__key" data-c="2"><span class="ns-chart__swatch ns-chart__swatch--line"></span>Developer</li>
  </ul>
  <svg class="ns-chart__svg" viewBox="0 0 320 120" role="img" aria-label="Admin track ahead of developer track for most of the period">
    <line class="ns-chart__gridline" x1="0" y1="10" x2="320" y2="10"/>
    <line class="ns-chart__gridline" x1="0" y1="55" x2="320" y2="55"/>
    <line class="ns-chart__baseline" x1="0" y1="100" x2="320" y2="100"/>
    <polyline class="ns-chart__line" data-c="1" points="10,90 70,72 130,60 190,42 250,38 300,26"/>
    <polyline class="ns-chart__line" data-c="2" points="10,95 70,88 130,70 190,64 250,48 300,44"/>
    <circle class="ns-chart__dot" data-c="1" cx="300" cy="26" r="4"><title>Admin · 78%</title></circle>
    <circle class="ns-chart__dot" data-c="2" cx="300" cy="44" r="4"><title>Developer · 62%</title></circle>
  </svg>
  <div class="ns-chart__x"><span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span></div>
</figure>

Area

The fill is the series hue at 10% opacity — enough to read \u201cvolume\u201d, never enough to shout.

Watch timehours / week

W1W2W3W4W5W6

markup

<figure class="ns-chart">
  <div class="ns-chart__head"><span class="ns-chart__title">Watch time</span><span class="ns-chart__sub">hours / week</span></div>
  <svg class="ns-chart__svg" viewBox="0 0 320 120" role="img" aria-label="Watch time rising over the period">
    <line class="ns-chart__gridline" x1="0" y1="10" x2="320" y2="10"/>
    <line class="ns-chart__gridline" x1="0" y1="55" x2="320" y2="55"/>
    <polygon class="ns-chart__area" data-c="1" points="10,84 70,72 130,78 190,50 250,46 300,24 300,100 10,100"/>
    <polyline class="ns-chart__line" data-c="1" points="10,84 70,72 130,78 190,50 250,46 300,24"/>
    <line class="ns-chart__baseline" x1="0" y1="100" x2="320" y2="100"/>
  </svg>
  <div class="ns-chart__x"><span>W1</span><span>W2</span><span>W3</span><span>W4</span><span>W5</span><span>W6</span></div>
</figure>

Target line

A dashed reference in muted ink — the one legal dashed line. The mark colors never change because of the target; distance from the line IS the story.

Weekly completions vs targettarget 60

W1W2W3W4W5W6

markup

<figure class="ns-chart">
  <div class="ns-chart__head"><span class="ns-chart__title">Weekly completions vs target</span><span class="ns-chart__sub">target 60</span></div>
  <svg class="ns-chart__svg" viewBox="0 0 320 120" role="img" aria-label="Completions crossing the target of 60 in week 5">
    <line class="ns-chart__baseline" x1="0" y1="100" x2="320" y2="100"/>
    <line class="ns-chart__ref" x1="0" y1="46" x2="320" y2="46"/>
    <text class="ns-chart__ref-label" x="2" y="41">target 60</text>
    <polyline class="ns-chart__line ns-chart__line--draw" data-c="1" pathLength="1" points="10,88 68,76 126,80 184,58 242,40 300,28"/>
    <circle class="ns-chart__dot" data-c="1" cx="300" cy="28" r="4"><title>W6 · 82</title></circle>
  </svg>
  <div class="ns-chart__x"><span>W1</span><span>W2</span><span>W3</span><span>W4</span><span>W5</span><span>W6</span></div>
</figure>