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: 700px; margin: 0 auto"></div>

JavaScript

$('#chartTimeSpent').highcharts({
    chart: {
        renderTo: 'chartTimeSpent',
        type: 'bar'
    },
    title: {
        text: 'Time spent per technicians '
    },
    tooltip: {
        formatter: function () {
            return '' +
                "" +
                'Time: ' + Highcharts.dateFormat('%H:%M:%S', this.y);
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    if (this.y === 0) {
                        return 0;
                    }
                    else {
                    var hours = (((this.y / 1000) / 60) / 60).toFixed(2);
                    var hourPortion = hours.toString().split(".")[0];
                    var minPortion = hours.toString().split(".")[1];
                    var minPortionUsed = (parseInt(hours.toString().split(".")[1]) * 0.6).toFixed(0);
                        if (minPortionUsed < 10) {
                            minPortionUsed = '0' + minPortionUsed.toString();
                        }
                    return hourPortion + ':' + minPortionUsed;
                    }
                }
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Time (hours)',
            align: 'high'
        },
        labels: {
            overflow: 'justify',
            formatter: function () {
                var seconds = (this.value / 1000) | 0;
                this.value -= seconds * 1000;

                var minutes = (seconds / 60) | 0;
                seconds -= minutes * 60;

                var hours = (minutes / 60) | 0;
                minutes -= hours * 60;
                return hours;
            }
        }
    },
    xAxis: {
        categories: ['Department1', 'Department2', 'Department3', 'Department4', 'Department5', 'Department6', 'Department7', 'Department8', 'Department9', 'Department10', 'Department11', 'Department12']
    },
    series:...