JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/jquery.canvasjs.stock.min.js"></script>
<div id="chartContainer" style="height: 250px; width: 100%;"></div>
<img id="loader" src="https://canvasjs.com/wp-content/uploads/images/gallery/javascript-stockcharts/overview/loading.gif" style="position: absolute; top: 150px; left: 48%; display: none"/>

JavaScript

// Event handlers

var priceData = [], volumeData = [], sliderData = [];
var stockChart = new CanvasJS.StockChart("chartContainer", {
    exportEnabled: false,
    theme: "light1",
    title: {text: "My chart"},
    rangeSelector: {
        enabled: true,
        inputFields: {enabled: false},
        buttons: [
            {
                label: "1m",
                range: 1,
                rangeType: "minute",
            },
            {
                label: "3m",
                range: 3,
                rangeType: "minute",
            },
            {
                label: "5m",
                range: 5,
                rangeType: "minute",
            },
            {
                label: "15m",
                range: 15,
                rangeType: "minute",
            },
            {
                label: "30m",
                range: 30,
                rangeType: "minute",
            },
            {
                label: "1h",
                range: 1,
                rangeType: "hour"
            },
            {
                label: "4h",
                range: 4,
                rangeType: "hour"
            },
            {
                label: "1D",
                range: 1,
                rangeType: "day"
            },
            {
                label: "All",
                rangeType: "all"
            }

        ]
    },

    navigator: {
        enabled: true,
        data: [{dataPoints: sliderData}],
        slider: {
            minimum: new Date(2018, 4, 1),
            maximum: new Date(2018, 6, 1)
        }
    },
    charts: [
        // PRICE DATA
        {
            toolTip: {
                enabled: false,
                shared: true
            },
            axisX: {
                lineThickness: 5,
                tickLength: 0,
                labelFormatter: function (e) {
                    return " ";
                },
                crosshair: {
                    enabled: true,
                ...