[Solved]-How to switch from 24hr to 12hr clock in Highstock chart?-Highcharts

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

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