Highcharts 12hr time format of x-axis labels

Question

I have a Highcharts column chart that is fed with 24 different y-values corresponding to x values from 0-23 representing the hour of the day.

Does Highcharts have a built in format for hours 0-23 such that I can have the X-axis show time labels like this:

12am, 1am ...... 12pm, 1pm.....11pm ??

I tried this but Highcharts ignored the x-values:

series: [{
   name: 'Time of Day',
   data: [['12am', 6],['1am', 1],['3am', 1],['5am', 1],['7am', 2],['8am', 19],['9am', 54],['10am', 80],['11am', 73],['Noon', 92],['1pm', 105],['2pm', 87],['3pm', 100],['4pm', 74],['5pm', 59],['6pm', 38],['7pm', 24],['8pm', 7],['9pm', 10],['10pm', 4],['11pm', 8],]
}]

EDIT:

The data may not include a value for every hour, as you can see in this sample data.

Answer 1

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/

Answer 2

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 ]
            ]
        }]