CODEWITHSUNDEEP
javascripthighcharts
stepheniok
stepheniok

Reputation: 405

Highcharts - xAxis showing every other year

I have a graph which my xAxis labels start at 2001- 2019 I am using Date.UTC to handle this.

 series: {
  pointStart: Date.UTC(2001, 0, 1),
  pointInterval: 365 * 24 * 3600 * 1000 / 4 //one fourth of year
}

When actually displaying on the graph every other year is not show on the Axis for example my graph Reads, 2002 2004 2006 2008 2010 .... etc

How can I adjust my code so that axis displays every year? I am expecting to see an outcome like 2001, 2002 , 2003 , 2004 , 2005 .....

I've tried setting a tickInterval: 1 but this ended up displaying more the months and years. In this situation I would like to only see the years displaying for every year.

Here is a jsfiddle

Upvotes: 1

Views: 159

Answers (2)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

You can add the xAxis.tickInterval options to your config to achieve the wanted result.

Demo: https://jsfiddle.net/BlackLabel/6kvncf2u/

xAxis: {
    type: 'datetime',
        tickInterval: 1000 * 3600 * 24 * 365,
  },

API: https://api.highcharts.com/highcharts/xAxis.tickInterval

Upvotes: 0

Clafouti
Clafouti

Reputation: 4645

You were right trying to use tickInterval, but the documentation states that the tickInterval uses milliseconds when the xAxis is datetime based.

So what you probably want is : 

tickInterval: 1000 * 3600 * 24 * 365,

However, that will not force the ticks on the axis, and the number of ticks will depend on the width of the window (at least that's what I observed). I then added this property to the xAxis object:

units: [['year', [1]]],

This states at what time intervals the ticks are allowed to fall on. Here's the documentation of the units property.

Using those two properties, the chart will only allow yearly ticks unless there is no space left for them to display (i.e., when the window is too small).

Here's the complete xAxis object:

xAxis: {
    type: 'datetime',
    tickInterval: 1000 * 3600 * 24 * 365,
    units: [['year', [1]]],
},

And here's an updated jsfiddle.

Note: You could also use tickPositioner and give a static array with the ticks you actually want to display (that may also require to define a formatter for the axis though).

Upvotes: 1

Related Questions