JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/css/anychart-ui.min.css">
<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/fonts/css/anychart-font.min.css">
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-stock.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-data-adapter.min.js"></script>
<div id="container"></div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

anychart.onDocumentReady(function () {
    // The data used in this sample can be obtained from the CDN
    // https://cdn.anychart.com/csv-data/csco-daily.csv
    anychart.data.loadCsvFile('https://cdn.anychart.com/csv-data/csco-daily.csv', function (data) {
        // create data table on loaded data
        var dataTable = anychart.data.table();
        dataTable.addData(data);

        // map loaded data for the ohlc series
        var mapping = dataTable.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4});

        // map loaded data for the scroller
        var scrollerMapping = dataTable.mapAs();
        scrollerMapping.addField('value', 5);

        // create stock chart
        var chart = anychart.stock();

        // create first plot on the chart
        var plot = chart.plot(0);
        // set grid settings
        plot.yGrid(true)
                .xGrid(true)
                .yMinorGrid(true)
                .xMinorGrid(true);

        // create EMA indicators with period 50
        plot.ema(dataTable.mapAs({'value': 4})).series().stroke('1.5 #455a64');

        var series = plot.candlestick(mapping);
        series.name('CSCO');
        series.legendItem().iconType('rising-falling');

        // create scroller series with mapped data
        chart.scroller().candlestick(mapping);

        // set chart selected date/time range
        chart.selectRange('2007-01-03', '2007-05-20');

        // set container id for the chart
        chart.container('container');
        // initiate chart drawing
        chart.draw();

        // create range picker
        rangePicker = anychart.ui.rangePicker();
        // init range picker
        rangePicker.render(chart);

        // create range selector
        rangeSelector = anychart.ui.rangeSelector();
        // init range selector
        rangeSelector.render(chart);
    });
});