JSFiddle - React, Tailwind, and code Playground

by philderksen

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    
    var chart;
    
    $(document).ready(function () {

        var topBandData = [8, 5, 5, 5, 5, 7, 7];
        var bottomBandData = [-2, -1, -1, -3, -3, -1, -1];
        var series1Data = [3, 4, 3, 5, 4, 9, 8];
        var series2Data = [1, 3, 5, 2, -2, -1, 0];

        // Determine floor/ceiling/threshold #'s from min/max of all data arrays combined.
        var allData = topBandData.concat(bottomBandData, series1Data, series2Data);
        var topThreshold = Math.max.apply(null, allData) + 3;
        var bottomThreshold = Math.min.apply(null, allData) - 3;

        console.log('allData', allData);
        console.log('topThreshold', topThreshold);
        console.log('bottomThreshold', bottomThreshold);

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },
            title: {
                text: 'Multi-axes + varying plot bands'
            },
            xAxis: {
                categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                ],
                
                // TODO Flush area charts left/right.
                // Try this? http://stackoverflow.com/questions/10087294/how-to-get-highcharts-x-axis-categories-starting-at-the-left-most-point
                
                minPadding: 0,
                maxPadding: 0
            },

            // "reverse" appears to affect every series the same. Can't set individually.
            /*
            yAxis: [{
                reverse: true
            }, {
                reverse: false
            }],
            */

            yAxis: {
                // Flush area charts top & bottom.
                floor: bottomThreshold,
                ceiling: topThreshold,
                startOnTick: false,
                endOnTick:...