score:0

Accepted answer

You can define your x-axis captions and series separately.

        xAxis: {
            categories: ['12 am', '1 am', '2 am', '3 am', '4 am', '5 am', '6 am', '7 am', '8 am', '9 am', '10 am', '11 am', 'Noon', '1 pm', '2 pm', '3 pm', '4 pm', '5 pm', '6 pm', '7 pm', '8 pm', '9 pm', '10 pm', '11 pm']
        }

        series: [{               
            name: 'Time of Day',
            data: [6, 1, 3, 1, 1, 3, 2, 19, 30, 54, 80, 73, 92, 105, 87, 100, 59, 38, 24, 7, 10, 4, 8, 10]
        }]

Edit-- If you don't have data for all hours, you can define your xAxis as datetime and provide values in the series for specific hours. 

        xAxis: {
            type: 'datetime',
        },
        series: [{
            name: 'Time of Day',
            data: [
                [Date.UTC(2014, 2, 28, 10), 5  ],
                [Date.UTC(2014, 2, 28, 12), 33 ],
                [Date.UTC(2014, 2, 28, 13), 20 ],
                [Date.UTC(2014, 2, 28, 15), 26 ]
            ]
        }]

score:9

You can specify the format of date/time to be displayed using the php strftime format, http://php.net/manual/en/function.strftime.php.

So for example if you want to change the hours(when and if they are displayed) and minutes(when and if they are displayed) to 12 hour format use %I instead of %H.

xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
        day: '%e of %b',
        minute:  '%I:%M',
        hour: '%I:%M'
    }
}

jsfiddle - http://jsfiddle.net/xya6kato/


Related Query

More Query from same tag