[Solved]-Displaying hours and minutes on x-axis with Highcharts-Highcharts

highcharts has a built in way of plotting times or dates as the xaxis. typically, in this case, your data would use a time value in milliseconds, and highcharts will plot it accordingly (see this example).

if you wanted to have a 24 hour day including your data, it might look something like this:

var chart = new highcharts.chart({
    chart: {
        renderto: 'container'
    },
    xaxis: {
        type: 'datetime' //ensures that xaxis is treated as datetime values
    },

    series: [{
        data: [
            [date.utc(2012, 5, 22, 8, 15), 14.8], 
            [date.utc(2012, 5, 22, 8, 20), 13.9], 
            [date.utc(2012, 5, 22, 8, 25), 12.8]
            //and so on...
        ]
    }]
});

you could then do something like use a custom xaxis formatter or date formatter to display the labels however you want.

you can try this code to make x-axis in 12hour time format

xaxis: {
    title: {
        enabled: true,
        text: 'hours of the day'
    },
    type: 'datetime',

    datetimelabelformats : {
        hour: '%i %p',
        minute: '%i:%m %p'
    }
},

also for "tooltip" try this:

tooltip: {
    formatter: function() {
        return ''+
                "" +
                'time: '+ highcharts.dateformat('%i:%m %p', this.x);
    }
},

and of course series would be:

series: [{
        data: [
            [date.utc(2013, 3, 22, 1, 15), 12.7], 
            [date.utc(2012, 3, 24, 3, 20), 13.5], 
            [date.utc(2012, 2, 22, 2, 25), 18.8]
        ]
    }]

hope it could solve your problem. thanks.