I am trying to show my x-axis values as a string on highcharts for a series but instead get (0,1,2....) which is the xaxis array index position. How do I show the xaxis value formatted as a string on higcharts?

Here is what I have

Highcharts.chart('container', {
  title: {
    text: 'Chart with time'
  },
  xAxis: {
    type: 'datetime',
                "labels": {
                "formatter": function() {
                        console.log(this);
                        console.log(this.value.toString());
                    return this.value
                }                    
            },
  },
  series: [{
    data: [
      ['Jan-1', 100],
      ['Jan-2', 120],
      ['Jan-3', 130]
    ]
  }]
});

Would like to see 'Jan-1', 'Jan-2' as the labels on the x-axis. Here is a link to the fiddle below /

I am trying to show my x-axis values as a string on highcharts for a series but instead get (0,1,2....) which is the xaxis array index position. How do I show the xaxis value formatted as a string on higcharts?

Here is what I have

Highcharts.chart('container', {
  title: {
    text: 'Chart with time'
  },
  xAxis: {
    type: 'datetime',
                "labels": {
                "formatter": function() {
                        console.log(this);
                        console.log(this.value.toString());
                    return this.value
                }                    
            },
  },
  series: [{
    data: [
      ['Jan-1', 100],
      ['Jan-2', 120],
      ['Jan-3', 130]
    ]
  }]
});

Would like to see 'Jan-1', 'Jan-2' as the labels on the x-axis. Here is a link to the fiddle below https://jsfiddle/dLfv2sbd/2/

• javascript
• highcharts

2 Answers 2

Remove labels and use type: 'category' instead of type: 'datetime':

Highcharts.chart('container', {
  title: {
    text: 'Chart with time'
  },
  xAxis: {
    type: 'category',
  },
  series: [{
    data: [
      ['Jan-1', 100],
      ['Jan-2', 120],
      ['Jan-3', 130]
    ]
  }]
});

Check the fiddle.

You can still use datetime this way.

Highcharts.chart('container', {
  title: {
    text: 'Chart with time'
  },
  xAxis: {
    type: 'datetime',
                "labels": {
                "formatter": function() {
                    return Highcharts.dateFormat('%b-%e', this.value)
                }                    
            },
  },
  series: [{
    data: [
      [Date.UTC(2017,0,1), 100],
      [Date.UTC(2017,0,2), 120],
      [Date.UTC(2017,0,3), 130]
    ]
  }]
});

https://jsfiddle/dLfv2sbd/4/