JSFiddle - React, Tailwind, and code Playground

by Fairlight

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

    <div class="chart" style="width:50%">
        <canvas id="myChartA" class="myChart"></canvas>
    </div>

    <div class="chart" style="width:50%">
        <canvas id="myChartB" class="myChart"></canvas>
    </div>

CSS

.chart {
            display: float;
            width: 30%;
        }

JavaScript

var leftEnd;
        var rightEnd;

        function updateChart() {
            Chart.helpers.each(Chart.instances, function (instance) {
                instance.options.scales.xAxes[0].time.min = leftEnd;
                instance.options.scales.xAxes[0].time.max = rightEnd;              
                instance.update();
            });
        }

        var ctxA = document.getElementById("myChartA").getContext("2d");
        var ctxB = document.getElementById("myChartB").getContext("2d");

        let data_A1 = [
            {
                x: "2019-01-01 00:01:38",
                y: "13.0"
            },
            {
                x: "2019-01-01 01:01:39",
                y: "11.0"
            },
            {
                x: "2019-01-01 02:01:40",
                y: "16.0"
            },
            {
                x: "2019-01-01 03:01:41",
                y: "15.0"
            },
            {
                x: "2019-01-01 04:01:42",
                y: "14.0"
            }
        ];


        let data_B1 = [
            {
                x: "2019-01-01 00:01:38",
                y: "12.0"
            },
            {
                x: "2019-01-01 01:01:39",
                y: "11.0"
            },
            {
                x: "2019-01-01 02:01:40",
                y: "13.0"
            },
            {
                x: "2019-01-01 03:01:41",
                y: "14.0"
            },
            {
                x: "2019-01-01 04:01:42",
                y: "16.0"
            }
        ];

    


        var myChartA = new Chart(ctxA, {
            type:  'linear',
            data: {
                datasets: [
                    {
                        label: '1st Data',
                        data: data_A1,
                        borderColor: '#0f0',
                        showLine: true
                    }

                ]
            },
            options: {
                animation: false,
                scales: {
   ...