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 left"></div>
            <div id="chart2" class="container right"></div>
        </div>

        <div class="grid">
            <div id="chart3" class="container left"></div>
            <div id="chart4" class="container right"></div>
        </div>

CSS

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

JavaScript

const y1 = new Yagr(chart1, {
    title: {text: 'Two scales'},
    timeline: [1, 2, 3],
    series: [
        {data: [1, 2, 3], color: 'red'},

        {data: [2, 1, 2], color: 'green', scale: 'r', type: 'area'},
        {data: [1, 2, 3], color: 'lime', scale: 'r', type: 'area'}
    ],
    axes: {
        y: {values: (u, v) => v.map(x => x + ' Mb'), splitsCount: 6},
        r: {side: 'right', label: 'Stacked', splitsCount: 6}
    },
    scales: {
        y: {min: 0, max: 5},
        r: {stacking: true, max: 5}
    },
    tooltip: {
        scales: {
            y: 'Mb',
            r: 'Stacked'
        },
        sum: {
            y: false,
            r: true,
        },
        tracking: {
            y: 'closest',
            r: 'area',
        },
    },
});