Using hours value with HighCharts

Question

I have some trouble with HighCharts, i can't figure out how to use hours. For now i manage to use day hours (00 to 24) but it stop at 24 and restart at 0 because HighCharts consider that a day is pass. I just want to have an hour value like 1h30 or 55h10 for example. Here is my chart :

$('#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: {
            type: 'datetime', //y-axis will be in milliseconds
            dateTimeLabelFormats: { //force all formats to be hour:minute:second
               second: '%H:%M',
               minute: '%H:%M',
               hour: '%H:%M',
               day: '%d %H:%M',
               week: '%H:%M',
               month: '%H:%M',
               year: '%H:%M'
            },
            title: {
                text: 'Hours'
            }
        },

        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.dateFormat('%Hh%M',new Date(this.y));
            }
        },
        series: [{
            name: 'Hours',
            colorByPoint: true,
            data: datas
        }]
    });

Hope you can help.

Answer 1

You don't need to use datetime for figuring this out. Since what you want to know is the number of hours per day, based on a value in milliseconds from your JSON data, you need to treat that value as a number, not a date.

Here's how I solved this problem:

First, I changed how you described the labels in your y-axis. I dropped the datetime type and used the formatter function to show the labels as whole hours. I also defined a tickInterval to show the labels one hour apart from one another.

yAxis: {
    labels: {
        formatter: function() {
            // show the labels as whole hours (3600000 milliseconds = 1 hour)
            return Highcharts.numberFormat(this.value/3600000,0);
        }
    },
    title: {
        text: 'Hours'
    },
    tickInterval: 3600000 // number of milliseconds in one hour
},

Next, I updated the code in your tooltip. We're taking your y values and making them whole hours. I set the second parameter in Highcharts.numberFormat to "2" so your toolip values show up with two decimal places (such as "2.50" for two-and-one-half hours).

tooltip: {
    formatter: function() {
        return  '<b>' + this.series.name +' : </b>' + 
            Highcharts.numberFormat(this.y/3600000,2);
    }
},

You can see a working fiddle, based off the sample data you provided, here: http://jsfiddle.net/brightmatrix/kk7odqez/

Here's a screenshot I took of the chart in this fiddle, showing how both the labels and tooltip now appear:

Thank you for the additional information you provided in your comments. That really helped me puzzle this out and get you what I hope is a useful solution.