JSFiddle - React, Tailwind, and code Playground

by Chris Hughes

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<button id="reset">Return</button>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

#reset {
    position:absolute;
    top:20px;
    left:700px;
    z-index:9999;
}

JavaScript

$(function () {

    var chart;

    //Test data: Newark Univ Farm
    var daysInMonth = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];

    var precipNorm = [3.14, 2.74, 4.11, 3.72, 4.1, 4.03, 4.8, 3.96, 4.74, 3.51, 3.55, 2.83];
    var monthlyNorm = [
        [42.1, 45.8, 54.9, 66.9, 76.2, 85.1, 88.2, 86.7, 79.7, 68.7, 57.6, 46.1],
        [33, 36.1, 43.7, 54.3, 63.8, 73.2, 77.1, 75.6, 68.4, 57, 47, 37.1],
        [24, 26.3, 32.4, 41.6, 51.3, 61.3, 65.9, 64.5, 57.2, 45.2, 36.3, 28.1]
    ];
    var dailyNormMax = [
        [42.3, 42.2, 42.1, 42, 42, 41.9, 41.8, 41.8, 41.7, 41.7, 41.7, 41.7, 41.7, 41.7, 41.7, 41.8, 41.8, 41.9, 41.9, 42, 42, 42.1, 42.2, 42.3, 42.4, 42.5, 42.6, 42.7, 42.8, 43, 43.1],
        [3],
        [4]
    ];
    var dailyNormMean = [
        [33.4, 33.3, 33.2, 33.1, 33, 33, 32.9, 32.8, 32.8, 32.8, 32.7, 32.7, 32.7, 32.7, 32.7, 32.7, 32.8, 32.8, 32.8, 32.9, 32.9, 33, 33.1, 33.1, 33.2, 33.3, 33.4, 33.5, 33.6, 33.7, 33.8],
        [],
        []
    ];
    var dailyNormMin = [
        [24.6, 24.4, 24.3, 24.2, 24.1, 24, 24, 23.9, 23.8, 23.8, 23.7, 23.7, 23.7, 23.7, 23.7, 23.7, 23.7, 23.7, 23.8, 23.8, 23.8, 23.9, 23.9, 24, 24.1, 24.1, 24.2, 24.3, 24.4, 24.5, 24.5],
        [],
        []
    ];
    var ranges = [
        [24.6, 42.3],
        [24.4, 42.2],
        [24.3, 42.1],
        [24.2, 42]
    ];

    $(document).ready(function () {
        var colors = Highcharts.getOptions().colors,
            categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            name = ['Monthly_Norms'],
            data = [{
                y: monthlyNorm[0][0],
                color: 'blue',
                drilldown: {
                    categories: daysInMonth,
                    series: [{
                        data: dailyNormMean[0],
                        zIndex: 1,
                        name: 'Tmean',

                       ...