How to switch from 24hr to 12hr clock in Highstock chart? - highcharts

Question

I am using highstock for stock charts. Currently the xAxis data are in 24 hr format for intraday.
I want to display the intraday data in 12 hrs format for xAxis.
Can you please tell me how to convert 24hrs time to 12 hrs in Highstock charts??
I tried with dateTimeLabelFormats, but no luck.
Thanks in Advance.

Answer 1

For me dateTimeLabelFormats works perfectly fine, see: http://jsfiddle.net/wmFZx/
$('#container').highcharts({
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
hour: '%I %p'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 2 * 3600 * 1000 // two hours
}]
});

Answer 2

For those coming in late like me(2yrs later), try this:
tooltip: {
xDateFormat: "%A, %b %e, %I:%M%p"
},
xAxis: {
dateTimeLabelFormats : {
hour: "%I %p"
}
}
Here's the JSFiddle: http://jsfiddle.net/4tat369x/
If you have multiple series and share the tooltip, you'll want to modify the dataGrouping dateTimeLabelFormats for your type of chart. Here's what it looks like for a line chart:
plotOptions: {
line: {
dataGrouping: {
dateTimeLabelFormats: {
millisecond: ["%A, %b %e, %H:%M:%S.%L%p", "%A, %b %e, %I:%M:%S.%L%p", "-%I:%M:%S.%L%p"],
second: ["%A, %b %e, %I:%M:%S%p", "%A, %b %e, %I:%M:%S%p", "-%I:%M:%S%p"],
minute: ["%A, %b %e, %I:%M%p", "%A, %b %e, %I:%M%p", "-%I:%M%p"],
hour: ["%A, %b %e, %I:%M%p", "%A, %b %e, %I:%M%p", "-%I:%M%p"],
day: ["%A, %b %e, %Y", "%A, %b %e", "-%A, %b %e, %Y"],
week: ["Week from %A, %b %e, %Y", "%A, %b %e", "-%A, %b %e, %Y"],
month: ["%B %Y", "%B", "-%B %Y"],
year: ["%Y", "%Y", "-%Y"]
}
}
}
}