I need to put in y-axis time format hh:mm, for example y-axis should have 16:00,32:00 and etc. ticks or smth simmilar.
I've been working with highcharts - I'm new with JS and web-programming.
I have my data in miliseconds and convert it to hh:mm format, but when I have miliseconds more than 86400000 (24 hours) it shows me next date and I need it to be still displayed in hours:minutes format.
Is there any way to do it? I've tried to change y-axis from type: 'datetime' to type: 'time', but it didn't help me alot. Here is jsfiddle example of my charts and bellow you can find just js-code.

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {

                title: {
                    text: 'Time (hh:mm)'
                },
                type: 'datetime',
                dateTimeLabelFormats: {
                hour: '%H:%M'
            }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Tokyo',
                data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]

            }]
        });
    });

I need to put in y-axis time format hh:mm, for example y-axis should have 16:00,32:00 and etc. ticks or smth simmilar.
I've been working with highcharts - I'm new with JS and web-programming.
I have my data in miliseconds and convert it to hh:mm format, but when I have miliseconds more than 86400000 (24 hours) it shows me next date and I need it to be still displayed in hours:minutes format.
Is there any way to do it? I've tried to change y-axis from type: 'datetime' to type: 'time', but it didn't help me alot. Here is jsfiddle example of my charts and bellow you can find just js-code.

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {

                title: {
                    text: 'Time (hh:mm)'
                },
                type: 'datetime',
                dateTimeLabelFormats: {
                hour: '%H:%M'
            }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Tokyo',
                data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]

            }]
        });
    });

• javascript
• date
• datetime
• highcharts

2 Answers 2

So here is the answer that I've got if anyone need it (here is the link to jsfiddle).
I set the time variables in ms:

data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]

And then I format this value as I need:

yAxis: {
            title: {
                text: 'Time (hh:mm)'
            },
            labels: {
                formatter: function () {
                    var time = this.value;
                    var hours1=parseInt(time/3600000);
                    var mins1=parseInt((parseInt(time%3600000))/60000);
                    return hours1 + ':' + mins1;
                }
            }
        }

That's the only way I found to make y axis in pure hh:mm format. Also you can make the data not in ms, but in w/e you want or need.

then better use your own formatting method, here you will have more control on formatting. you can use formatter as shown below.

yAxis: {
    labels: {
        formatter: function () {
            //get the timestamp
            var time = this.value;
            //now manipulate the timestamp as you wan using data functions
        }
    }
}

hope this will help you in achieving what you needed.