JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id='graph-container'>
    <div id='detail'></div>
    <div id='master'></div>
</div>

JavaScript

$(function () {

    var selectionHandler = function (event) {
        var selection = event.xAxis[0],
            xAxis = this.xAxis[0],
            extremes = xAxis.getExtremes(),
            max = selection.max,
            min = selection.min,
            data = [];
        // mask unselected areas
        xAxis.removePlotBand('before-selected');
        xAxis.addPlotBand({
            id: 'before-selected',
            color: 'rgba(0, 0, 0, 0.2)',
            from: extremes.min,
            to: min
        });
        xAxis.removePlotBand('after-selected');
        xAxis.addPlotBand({
            id: 'after-selected',
            color: 'rgba(0, 0, 0, 0.2)',
            from: max,
            to: extremes.max
        });
        jQuery.each(this.series[0].data, function (i, point) {
            if (min < point.x && point.x < max) {
                data.push({
                    x: point.x,
                    y: point.y
                });
            }
        });
        detailsChart.series[0].setData(data);
        // don't do whatever we would normally do on select
        return false;
    };
    var masterOptions = {
        chart: {
            zoomType: 'x',
            events: {
                selection: selectionHandler
            }
        },
        title: {
            text: null
        },
        tooltip: {
            formatter: function () {
                return false;
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        yAxis: {
            title: {
                text: null
            },
            labels: {
                enabled: false
            }
        },
        xAxis: {
            title: {
                text: null
            },
            plotBands: [{
                id: 'before-selected',
                color: 'rgba(0, 0, 0, 0.2)',
                from: -100,
                to: -50
            }, {
                id:...