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 id="root">
            <div id="chart1" class="container"></div>
            <div id="chart2" class="container"></div>
            <div id="chart3" class="container"></div>
            <div id="chart4" class="container"></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: 'Vertical lines'},
    timeline: [1, 2, 3, 4, 5],
    series: [{data: [1, 2, 3, 2, 2], color: 'red'}],
    scales: {y: {min: 0, max: 6}},
    axes: {
        x: {
            plotLines: [{
                value: 2.3,
                width: 4,
                color: 'rgba(20, 20, 244, 0.5)'
            }, {
                value: 4.5,
                width: 4,
                color: 'rgba(20, 20, 244, 0.5)'
            }]
        }
    },
});

const y2 = new Yagr(chart2, {
    title: {text: 'Horizontal lines'},
    timeline: [1, 2, 3, 4, 5],
    series: [{data: [1, 2, 3, 3, 2], color: 'red'}],
    scales: {y: {min: 0, max: 6}},
    axes: {
        y: {
            plotLines: [{
                value: 2.4,
                width: 4,
                color: 'rgba(130, 20, 244, 0.9)'
            }, {
                value: 0.3,
                width: 4,
                color: 'rgba(130, 20, 244, 0.0)'
            }]
        }
    },
});

const y3 = new Yagr(chart3, {
    title: {text: 'Vertical bands'},
    timeline: [1, 2, 3, 4, 5],
    series: [{data: [1, 2, 3, 2, 2], color: 'red'}],
    scales: {y: {min: 0, max: 6}},
    axes: {
        x: {
            plotLines: [{
                value: [2, 3],
                color: 'rgba(20, 20, 244, 0.3)'
            }, {
                value: [4, 5],
                color: 'rgba(20, 20, 244, 0.3)'
            }]
        }
    },
});

const y4 = new Yagr(chart4, {
    title: {text: 'Horizontal bands'},
    timeline: [1, 2, 3, 4, 5],
    series: [{data: [1, 2, 3, 3, 2], color: 'red'}],
    scales: {y: {min: 0, max: 6}},
    axes: {
        y: {
            plotLines: [{
                value: [2, 3],
                color: 'rgba(130, 20, 244, 0.3)'
            }, {
                value: [0, 1],
                color: 'rgba(130, 20, 244, 0.3)'
            }]
        }
    },
});