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