Highcharts - Only Returning One Date on xAxis

Question

In my area chart I have three series which are presorted chronologically. This is what I am currently getting to display:

I'm using React which is why you see multiple renders, just ignore that. My dates that I am returning for the xAxis are in order but I'm only getting one. Why is that? Here is my code (using React Highcharts but it shouldn't matter I don't think):

xAxis: {
  type: 'datetime',
  labels: {
    formatter: function() {
      const dayStr = moment.unix(this.value).format('D');
      const monthStr = moment.unix(this.value).format('M');
      console.log(`${monthStr}/${dayStr}`, this.value);

      return `${monthStr}/${dayStr}`;
    },
    align: 'left',
    style: { "color": "#FFFFFF" }
  },
  title: {
    text: 'Date',
    style: { "color": "#FFFFFF" }
  }
},

As you can see my formatter function is returning multiple dates but only one displays.

Maybe there is not enough place for the second label, try without align: 'left', — Core972
Awesome. I removed that and got a second date to display. Rest must not be showing due to space — user2465134

Kamil Kulig Kamil Kulig · Accepted Answer · 2018-01-15T18:22:24

By default Highcharts algorithms decide which ticks to display (labels are drawn where the ticks are). Also some labels might be omitted when there's no enough space to place them.

Use tickPositions to force Highcharts to draw given ticks. You can also try tickPositioner to modify the ticks generated automatically.

API references:

Highcharts - Only Returning One Date on xAxis

1 Answers