JSFiddle - React, Tailwind, and code Playground

by NinjaFish

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="chart"></div>
<button id="redraw">Redraw</button>
<div id="debug"></div>

CSS

#chart {
    width: 400px;
    height: 300px;
}

#debug {
    font-family: sans-serif;
    font-size: 80%;
    padding: 0 0.5em;
}

#debug div {
    padding: 0.3em 0;
}

JavaScript

var qData = [100, 200, 50, 350];
var mData = [95, 80, 110, 175, 250, 200, 75, 25, 40, 300, 375, 350];

var qCats = ["Q1", "Q2", "Q3", "Q4"];
var mCats = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"];

var chart = new Highcharts.Chart({
    chart: {
        renderTo: "chart",
        events: {
            selection: function(e) {
                if (e.xAxis) {
                    var diff = e.xAxis[0].max - e.xAxis[0].min;
                    log("diff: " + diff);
                    
                    if (diff < 2) {
                        var extremes = zoom(this.zoomLevel + 1, e.xAxis[0].min, e.xAxis[0].max);
                        e.xAxis[0].min = extremes.min;
                        e.xAxis[0].max = extremes.max;
                    }
                }
                else {
                    log("Zoom reset");
                    zoom(0);
                }
                chart.redraw();
            }
        },
        zoomType: "xy"
    },
    xAxis: {
        categories: qCats,
        maxZoom: 1
    },
    series: [{
        data: qData
    }]
}, function() {
    this.zoomLevel = 0;
    this.maxZoomLevel = 1;
});

function zoom(level, min, max) {
    if (level <= chart.maxZoomLevel && level != chart.zoomLevel) {
        log("Zooming to level " + level);
        chart.zoomLevel = level;
        
        if (level > 0) {
            var scale = mCats.length / chart.xAxis[0].categories.length;
            replaceData(mCats, mData);
            var newMin = min * scale, newMax = max * scale;
            log("scaled min: " + newMin + ", scaled max: " + newMax);
            return { min: newMin, max: newMax };
        }
        else {
            replaceData(qCats, qData);
            return { min: 0, max: 0 };
        }
    }
    else {
        return { min: min, max: max };
    }
}

function replaceData(categories, data) {
    chart.xAxis[0].setCategories(categories, false);
    chart.series[0].remove(false);
    chart.addSeries({ data:...