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 '
    },
    xAxis: {
        title: {
            text: null
        },
        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'
        }
    },
    plotOptions: {
        series: {
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000 // one day
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -100,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: '#FFFFFF',
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [

    {
        name: 'Someone',
        data: [300000, 0, 6720000, 6600000, 11400000, 1500000, 900000, 0, 0, 300000, 0, 0]
    }, {
        name: 'Someone',
        data: [2100000, 1800000, 1200000, 3300000, 60600000, 0, 13920000, 5400000, 18900000, 300000, 0, 0]
    }, {
        name: 'Someone',
        data: [9840000, 223380000, 300000, 3120000, 8760000, 2460000, 9300000, 2820000, 3960000, 1320000, 900000, 540000]
    }]
});