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 impression I only need to do this for it to work

Highcharts.chart('container', {
  title: {
    text: 'Chart with time'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      day: "%e. %b",
      month: "%b '%y",
      year: "%Y"
    }
  },
  series: [{
    data: [
      [1493326164493, 100],
      [1493326194018, 120]
    ]
  }]
});

What am I doing wrong? I have posted a fiddle link below for my scenario

https://jsfiddle.net/dLfv2sbd/

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

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 3

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