JSFiddle - React, Tailwind, and code Playground

by roedema

HTML

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

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            },
            series: {
                //groupPadding: 0,
                //pointPadding: 0,
            },
        },
        colors: ['#CCCCCC', '#FFFF66'],
        title: {
            text: 'Snow depth at Vikjafjellet, Norway'
        },
        subtitle: {
            text: 'Irregular time data in Highcharts JS'
        },
        xAxis: {
            //categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            type: 'datetime',
            //tickInterval: 24*60*60*1000,
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%b. %eY',
                week: '%b. %e',
                day: '%b. %e'
            },
            labels: {
                rotation: -45
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
            min: 0,
            stackLabels: {
                enabled: true,
                style: {
                    //fontWeight: 'bold',
                    //color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        tooltip: {
            shared: true,
            /*formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }*/
            //headerFormat: '<b>{series.name}</b><br>',
            //pointFormat: '{point.x:%b....