JSFiddle - React, Tailwind, and code Playground

by Dat

HTML

<script src="https://unpkg.com/[email protected]/dist/yagr.iife.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/index.css" />

<style>
  .container {
                margin-bottom: 26px;
                height: 400px;
            }
            #root {
                display: grid;
                grid-gap: 12px;
                grid-template-columns: 1fr 1fr;
            }
</style>

 <div class="grid">
            <div id="chart1" class="container"></div>
        </div>
        <button id="reset">Rest data</button>
        <button id="add">Add data</button>

CSS

.container {
                margin-bottom: 26px;
                height: 400px;
            }
            #root {
                display: grid;
                grid-gap: 12px;
                grid-template-columns: 1fr 1fr;
            }

JavaScript

const yagr = new Yagr(chart1, {
    title: {text: 'Range bands'},
    timeline: new Array(20).fill().map((_, i) => i * 1000),
    series: [
        {data: new Array(20).fill().map((_, i) => Math.random() * 6), color: 'red', id: '1'},
        {data: new Array(20).fill().map((_, i) => Math.random() * 6), color: 'orange', id: '2'}
    ],
});

window.reset.onclick = () => {
    yagr.batch(() => {
        yagr.config.timeline = new Array(20).fill().map((_, i) => i * 1000);
        yagr.setSeries('1', {data: new Array(20).fill().map((_, i) => Math.random() * 6)});
    });
};

window.add.onclick = () => {
    const l = yagr.config.timeline[yagr.config.timeline.length - 1];
    yagr.setSeries([l + 1000, l + 2000], [{id: '1', data: [Math.random() * 6, Math.random() * 6]}]);
};