JSFiddle - React, Tailwind, and code Playground

by ChrisEvans_UK

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js">
    </script>

  <div id="chartContainer" style="height: 275px; width: 100%;"></div>

JavaScript

window.onload = function () {
            var rawData = [
                { "x": "2019-07-01T14:45:03.0155631", "y": 16.1700 },
                { "x": "2019-07-01T14:45:06.0158018", "y": 16.1700 },
                { "x": "2019-07-01T14:45:09.0165546", "y": 16.1900 },
                { "x": "2019-07-01T14:45:12.0166973", "y": 16.1900 },
                { "x": "2019-07-01T14:45:15.0168826", "y": 16.1900 },
                { "x": "2019-07-01T14:45:18.0170842", "y": 16.1900 },
                { "x": "2019-07-01T14:45:21.0172816", "y": 16.1900 },
                { "x": "2019-07-01T14:45:24.0274732", "y": 16.1900 },
                { "x": "2019-07-01T14:45:27.0275923", "y": 16.1900 },
                { "x": "2019-07-01T14:45:30.0278257", "y": 16.2000 },
                { "x": "2019-07-01T14:45:33.0280544", "y": 16.2000 },
                { "x": "2019-07-01T14:45:36.028261", "y": 16.2000 },
                { "x": "2019-07-01T14:45:39.0285524", "y": 16.2000 },
                { "x": "2019-07-01T14:45:42.0295438", "y": 16.2000 },]
        for (var i = 0; i < rawData.length; i++) {
            rawData[i]["x"] = new Date(rawData[i]["x"]);
        }

        var chart = new CanvasJS.Chart("chartContainer",
        {
            title: {
                text: "TestChart2",
            },
            axisX: {
                stripLines: [
                    {
                        startValue: new Date(2019,6,1,14,45,10),
                        endValue: new Date(2019,6,1,14,45,20),
                        label: "test",
                    }
                ]
            },
            axisY: {
                includeZero: false,
            },
            data: [
                {
                    type: "line",
                    xValueType: "dateTime",
                    xValueFormatString: "HH:mm:ss",
                    dataPoints: rawData,
                }
            ]
        });

        chart.render();
    };