Chart

Line, area, bar or scatter. Text stays its real size at every width, and a table with the same numbers sits behind it.

kit.chart()
845 B of CSS · 26 rules
kit.css
kit-data.css
kit-web.js for its behaviour

Viewers, last 7 days

Viewers 1.2k

Viewers, last 7 days
	Viewers
Oct 26	820
Oct 27	1.1k
Oct 28	960
Oct 29	1.5k
Oct 30	1.3k
Oct 31	1.7k
Nov 1	1.2k

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.chart({
      type: 'area',
      title: 'Viewers, last 7 days',
      y: { fmt: 'compact' },
      x: { time: true },
      series: [
          { name: 'Viewers', points: [[1793023500000, 820], [1793109900000, 1100], [1793196300000, 960], [1793282700000, 1480], [1793369100000, 1320], [1793455500000, 1710], [1793541900000, 1204]] },
      ]
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<link rel="stylesheet" href="https://openvibe.network/shared/kit-data.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>
<script src="https://openvibe.network/shared/kit-data-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.chart({
        type: 'area',
        title: 'Viewers, last 7 days',
        y: { fmt: 'compact' },
        x: { time: true },
        series: [
            { name: 'Viewers', points: [[1793023500000, 820], [1793109900000, 1100], [1793196300000, 960], [1793282700000, 1480], [1793369100000, 1320], [1793455500000, 1710], [1793541900000, 1204]] },
        ]
    });
  OpenVibeKit.enhance(box);
</script>

The HTML it returns · 2.7 KB

<figure class="ovk-chart ovk-chart--area" style="--ovk-chart-h:220px;--ovk-chart-g:42px"><figcaption><strong>Viewers, last 7 days</strong></figcaption><ul class="ovk-chart-legend"><li class="ovk-chart-s1"><i aria-hidden="true"></i>Viewers <b>1.2k</b></li></ul><div class="ovk-chart-plot" tabindex="0" role="img" aria-label="Viewers, last 7 days" data-ovk-chart="{&quot;x&quot;:[[0,&quot;Oct 26&quot;],[16.67,&quot;Oct 27&quot;],[33.33,&quot;Oct 28&quot;],[50,&quot;Oct 29&quot;],[66.67,&quot;Oct 30&quot;],[83.33,&quot;Oct 31&quot;],[100,&quot;Nov 1&quot;]],&quot;s&quot;:[{&quot;n&quot;:&quot;Viewers&quot;,&quot;c&quot;:1,&quot;v&quot;:[[41,&quot;820&quot;],[55,&quot;1.1k&quot;],[48,&quot;960&quot;],[74,&quot;1.5k&quot;],[66,&quot;1.3k&quot;],[85.5,&quot;1.7k&quot;],[60.2,&quot;1.2k&quot;]]}]}"><span class="ovk-chart-grid" style="bottom:0%" aria-hidden="true"></span><span class="ovk-chart-yt" style="bottom:0%" aria-hidden="true">0</span><span class="ovk-chart-grid" style="bottom:25%" aria-hidden="true"></span><span class="ovk-chart-yt" style="bottom:25%" aria-hidden="true">500</span><span class="ovk-chart-grid" style="bottom:50%" aria-hidden="true"></span><span class="ovk-chart-yt" style="bottom:50%" aria-hidden="true">1k</span><span class="ovk-chart-grid" style="bottom:75%" aria-hidden="true"></span><span class="ovk-chart-yt" style="bottom:75%" aria-hidden="true">1.5k</span><span class="ovk-chart-grid" style="bottom:100%" aria-hidden="true"></span><span class="ovk-chart-yt" style="bottom:100%" aria-hidden="true">2k</span><span class="ovk-chart-xt" style="left:23.55%" aria-hidden="true">Oct 28</span><span class="ovk-chart-xt" style="left:56.89%" aria-hidden="true">Oct 30</span><span class="ovk-chart-xt" style="left:90.22%" aria-hidden="true">Nov 1</span><svg class="ovk-chart-svg" viewBox="0 0 1000 1000" preserveAspectRatio="none" aria-hidden="true" focusable="false"><g class="ovk-chart-s1"><path class="ovk-chart-area" d="M0.0,590.0L166.7,450.0L333.3,520.0L500.0,260.0L666.7,340.0L833.3,145.0L1000.0,398.0L1000.0,1000.0L0.0,1000.0Z"/><path class="ovk-chart-line" d="M0.0,590.0L166.7,450.0L333.3,520.0L500.0,260.0L666.7,340.0L833.3,145.0L1000.0,398.0"/></g></svg><span class="ovk-chart-rule" hidden></span><span class="ovk-chart-tip" hidden></span></div><div class="ovk-sr"><table><caption>Viewers, last 7 days</caption><thead><tr><th scope="col"></th><th scope="col">Viewers</th></tr></thead><tbody><tr><th scope="row">Oct 26</th><td>820</td></tr><tr><th scope="row">Oct 27</th><td>1.1k</td></tr><tr><th scope="row">Oct 28</th><td>960</td></tr><tr><th scope="row">Oct 29</th><td>1.5k</td></tr><tr><th scope="row">Oct 30</th><td>1.3k</td></tr><tr><th scope="row">Oct 31</th><td>1.7k</td></tr><tr><th scope="row">Nov 1</th><td>1.2k</td></tr></tbody></table></div></figure>

What it weighs

Its own rules are 3.2 KB, 845 B as sent: 5% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.