Highcharts Set Xaxis Values Starting 12am And Ends In 11pm

I'm using a highcharts plugin, my aim is to draw a graph for the wholeday by hour. How to set the xAxis to use 12hour format (w/ AM&PM), start => end of the day. Or some opt

Solution 1:

If you already have the value then you can do something like

xAxis: {
    labels: {
        //isPm() is a function that checks for am and pm of your timestamp
        format: '{value} ' + (isPm() ? "pm":"am")
    }
}

also you need to show how you are plotting the chart so as to know the best way of implementation

Solution 2:

You can change your datetime label format (API):

xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      millisecond: '%l:%M:%S.%L %P',
      second: '%l:%M:%S %P',
      minute: '%l:%M %P',
      hour: '%l:%M %P',
      day: '(%e. %b) %l:%M %P',
    }
}

See this JSFiddle demonstration.

The values set in dateTimeLabelFormats is a subset of PHPs strftime. In this case:

• %l: Hour in 12-hour format, with a space preceding single digits. 1 through 12
• %P: Lower-case 'am' or 'pm' based on the given time. Example: am for 00:31, pm for 22:23