JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function () {

var dialogWidth=$('#chart2').width();

$('#chart2').highcharts({
        chart: {
            type: 'column',
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            borderWidth: 2,
            borderRadius: 7,
            borderColor: '#D8D8D8',
            width:dialogWidth/2,
            height:dialogWidth/2+50
        },
        title: {
            text: 'Time Worked per Day'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            
            labels: {
            
              formatter: function() {
                  return Highcharts.numberFormat(this.value/3600000,0);
              }
            },
            title: {
                text: 'Hours'
            },
            tickInterval: 3600000
        },

        credits: {
              enabled: false
          },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        return  Highcharts.dateFormat('%Hh%M',new Date(this.y));
                    }
                }
            }
        },
         tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +' : </b>' +
                    Highcharts.numberFormat(this.y/3600000,2);
            }
        },
        series: [{
            name: 'Hours',
            colorByPoint: true,
            data: [["25-05-16", 9000000], ["26-05-16", 7000000], ["27-05-16", 8000000]]
        }]
    });
    
    
});