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 showTooltip = (y) => y.state.isMouseOver;

const y1 = new Yagr(chart1, {
    title: {text: 'Example 1'},
    timeline: [1, 2, 3],
    series: [{data: [1, 2, 3], color: 'red'}],
    cursor: {sync: 'a'},
    tooltip: {show: showTooltip},
});

const y2 = new Yagr(chart2, {
    title: {text: 'Example 2'},
    timeline: [1, 2, 3],
    series: [{data: [3, 2, 1], color: 'green'}],
    cursor: {sync: 'a'},
    tooltip: {show: showTooltip},
});

y1.subscribe();
y2.subscribe();

const y3 = new Yagr(chart3, {
    title: {text: 'Example 3'},
    timeline: [1, 2, 3],
    series: [{data: [1, 2, 3], color: 'red'}],
    cursor: {sync: 'b'},
});

const y4 = new Yagr(chart4, {
    title: {text: 'Example 4'},
    timeline: [1, 2, 3],
    series: [{data: [3, 2, 1], color: 'green'}],
    cursor: {sync: 'b'},
});

y4.subscribe();
y3.subscribe();