Component

Chart

The SVG sparkline plot from the tyrone dashboard: grid lines, mono axes and a legend with live values.

Preview

CPU load

sys – user –

100500

5 min agonow

Code

<div class="card" style="max-width:560px">
  <div class="ch-top">
    <h2>CPU load</h2>
    <div class="legend">
      <span><i style="background:var(--accent)"></i>sys <b data-mw-chart-v0>–</b></span>
      <span><i style="background:var(--mem)"></i>user <b data-mw-chart-v1>–</b></span>
    </div>
  </div>
  <div class="plot">
    <div class="yax"><span data-mw-chart-y2>100</span><span data-mw-chart-y1>50</span><span>0</span></div>
    <svg data-mw-chart viewBox="0 0 300 100" preserveAspectRatio="none"></svg>
  </div>
  <div class="xax"><span>5 min ago</span><span>now</span></div>
</div>

This component is interactive — include behaviors.js after your markup.

The demo animates with random data. In your app, feed the same structure real samples — the chart from tyrone reads its series from the Netdata API and redraws on every poll.

← Card Checkbox →