JSFiddle - React, Tailwind, and code Playground

by wergeld

HTML

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

JavaScript

$('#chartTimeSpent').highcharts({
    chart: {
        renderTo: 'chartTimeSpent',
        type: 'bar'
    },
    title: {
        text: 'Time spent per technicians ' //+ dateInterval
    },
    tooltip: {
        formatter: function () {
            return '' +
                "" +
                'Time: ' + Highcharts.dateFormat('%H:%M:%S', this.y);
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Time (hours)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        },
        type: 'datetime',
        dateTimeLabelFormats: {
            second: '%H:%M:%S',
            minute: '%H:%M:%S',
            hour: '%H:%M:%S',
            day: '%H:%M:%S',
            week: '%H:%M:%S',
            month: '%H:%M:%S',
            year: '%H:%M:%S'
        }
    },
    xAxis: {
        categories: ['Department1', 'Department2', 'Department3', 'Department4', 'Department5', 'Department6', 'Department7', 'Department8', 'Department9', 'Department10', 'Department11', 'Department12']
    },
    series: [{
        name: 'Someone1',
        data: [300000, 0, 6720000, 6600000, 11400000, 1500000, 900000, 0, 0, 300000, 0, 0]
    }, {
        name: 'Someone2',
        data: [2100000, 1800000, 1200000, 3300000, 60600000, 0, 13920000, 5400000, 18900000, 300000, 0, 0]
    }, {
        name: 'Someone3',
        data: [9840000, 223380000, 300000, 3120000, 8760000, 2460000, 9300000, 2820000, 3960000, 1320000, 900000, 540000]
    }]
});