HighCharts show datetime format on xAxis

Question

I am trying to display dateTime in day/weekly/month format on the x axis of high charts I have the data formatted as x utc date time format and y (magnitude). I was under the im

Answer 1

axis.dateTimeLabelFormats works a little bit different. In the first place, Highcharts tries to guess what is 'the best unit' of your data and, e.g. if it is a day, it will format it according to day property from dateTimeLabelFormats.

If you want to just format axis labels, you can use axis.labels.format and specify a format like this:

xAxis: {
  type: 'datetime',
  labels: {
    format: '{value:%Y-%b-%e}'
  },

example: https://jsfiddle.net/dLfv2sbd/1/

Answer 2

Simple year-month-day format:

 format: '{value:%Y-%m-%e}'

Answer 3

You can try format date with

 xAxis: {
   labels: {
    formatter: function(){

      return moment(new Date(this.value)).format('DD'); // example for moment.js date library

      //return this.value;
    },
},

Also you can check documentation http://api.highcharts.com/highcharts/xAxis.labels.formatter

Answer 4

You can try this also -

1. {value:%Y-%b-%e %l:%M %p }

labels: {
      format: '{value:%Y-%b-%e %l:%M %p }'
},

Output- 2017-Apr-27 8:49 PM

2. format: '{value:%Y-%b-%e %l:%M}'

labels: {
          format: '{value:%Y-%b-%e %l:%M %p }'
},

Output- 2017-Apr-27 8:49

3. format: '{value:%Y-%b-%e}'

 labels: {
              format: '{value:%Y-%b-%e}'
 },

Output - 2017-Apr-27

4. format: '{value:%Y-%b-%e %H:%M}'

labels: {
      format: '{value:%Y-%b-%e %H:%M}'
},

output 2017-Apr-27 20:49