JSFiddle - React, Tailwind, and code Playground

by Bernardo Alfonso Borunda Jaquez

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/media/com_demo/highslide.css" />

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(document).ready(function() {
    Highcharts.setOptions({
        lang: {
            drillUpText: 'Back'
        }
    });
    $('#DrillDown').highcharts({
        plotOptions: {
            series: {
                point: {
                    events: {
                        click: function(e) {
                            alert(this.series.name);
                        }
                    }
                }
            }
        },

        chart: {
            type: 'column'
        },
        title: {
            text: 'Progressive Number Of Data'
        },
        subtitle: {
            text: '03/15/2015 - 03/18/2015 &nbsp;&nbsp;&nbsp; ALL'
        },
        yAxis: {
            title: {
                text: 'Quantity'
            }
        },
        legend: {
            enabled: true
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br>'
        },
        xAxis: {
            type: 'category'
        },
        series: [{
            name: 'PACKLOGIN',
            data: [{
                name: '17-MAR',
                drilldown: 'PACKLOGIN_17-MAR',
                y: 74
            }]
        }, {
            name: 'AWP',
            data: [{
                name: '17-MAR',
                drilldown: 'AWP_17-MAR',
                y: 4
            }]
        }, {
            name: 'IN_PROCESS',
            data: [{
                name: '17-MAR',
                drilldown: 'IN_PROCESS_17-MAR',
                y: 45
            }]
        }],
        drilldown: {
            series: [{
                id: 'PACKLOGIN_17-MAR',
                name: 'PACKLOGIN_17-MAR',
                data: [
                    ['NTF', 69],
                    ['DIAG', 3],
                    ['SNDDIAG', 2]
                ]
            }, {
                id: 'AWP_17-MAR',
                name: 'AWP_17-MAR',
                data: [
                    ['CND', 3],
                ...