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 chartNames = ['A','B','C'];
    var views = [];
    var charts = [];
    var serieses = [];

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

    chartInit();

    var scroller = charts[2].xScroller({position: "afterAxes"});
    var startIndex = 0;
    var endIndex = 0;
    var zoom = charts[2].xZoom();

    // scroller handler
    scroller.listen('scrollerchange', function () {
        startIndex = zoom.getStartRatio();
        endIndex = zoom.getEndRatio();
        for (var i = 0; i < charts.length; i++) {
                    serieses[i].unhover();
            charts[i].xZoom().setTo(startIndex, endIndex);
        }
    });



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

        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.cartesian();
            serieses[i] = charts[i].marker(views[i]);
            charts[i].title(i + "-Chart with Error Bars")
                .container(stage)
                .xAxis(true)
                .yAxis(true)
                .bounds(0, (i * 33.3) + '%', '100%', (33.3 - 1) + '%')
                .tooltip().title(false);
            charts[i].tooltip().separator(false);
            letter = chartNames.shift();
            charts[i].xAxis().labels().format(letter + "{%Value}");
            charts[i].yAxis().width('5%');

            serieses[i].hoverFill("#ff000e", 0.4);
            serieses[i].hoverStroke("yellow", 2, 'bevel', "round");


            //multihovering
            charts[i].interactivity({hoverMode: "byX"});
            //hover event handler
            charts[i].listen("pointsHover", function (e) {
                var ind =...