JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<div id="container"></div>

CSS

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

JavaScript

var data = getData();

anychart.onDocumentReady(function () {

    var views = [];
    var charts = [];
    var serieses = [];

    // create stage for all charts
    stage = acgraph.create('container');

    //set custom X-scale for multiple chart
    var customScale = anychart.scales.linear();
    customScale.minimum(data[0][0]);
    customScale.maximum(data.length);
    var xTicks = customScale.ticks().interval(10);

    // var bounds = document.body.clientHeight;
    var container_height, container_width = null;

    // draw scroller
    var scroller = anychart.standalones.scroller();
    resize();

    // Sets container.
    scroller.container(stage);
    scroller.draw();

    chartInit();

    //scroller handler
    scroller.listen('click', function () {
        var startRatio = scroller.startRatio();
        var endRatio = scroller.endRatio();
        var startIndex = Math.round(startRatio * data.length);
        var endIndex = Math.round(endRatio * data.length);
        customScale.minimum(startIndex);
        customScale.maximum(endIndex);
    });

    //window resize event listener calls handler
    window.onresize = resize;

    //window resize event handler
    function resize() {
        container_height = document.getElementById('container').clientHeight;
        container_width = document.getElementById('container').clientWidth;
        scroller.parentBounds(10, container_height - 70, container_width - 20, 60);
    }

//chart initiator
    function chartInit() {
        var dataSet = anychart.data.set(data);

        for (var i = 0; i < 3; i++) {

            views[i] = dataSet.mapAs({
                "x": [0],
                "value": [i * 3 + 3],
                "valueLowerError": [i * 3 + 1],
                "valueUpperError": [i * 3 + 2]
            });

            charts[i] = anychart.line();
            serieses[i] = charts[i].marker(views[i]);
            charts[i].title(i + "-Chart with Error Bars");
           ...