CODEWITHSUNDEEP
javascripthighcharts
Masinde Muliro
Masinde Muliro

Reputation: 1183

Highcharts X-Axis Issue

I have googled and searched stack overflow alot before deciding to ask this question here because while some questions seemed similar, none of the solutions worked for me.

I have categorised data from sometimes a very wide range eg 1881 - 2012 and would like to dynamically calculate and divide this range into only 11 points on the x-axis which is what I have room to display with no zooming enabled. If data is from from 1881 - 2012, I would like it for example want it to show(not exactly calculated) from 1881, 1901, 1921, 1941.....if its from 1958 - 2013, then 1958, 1968, 1978.... 

xAxis: {
           categories: range(start_year,end_year),
           tickmarkPlacement: "on",
           tickInterval: Math.ceil(range(start_year,end_year).length/11), 
       },

.......

function range(start_year,end_year)
  {
    var years = [];

    for(var i = start_year;i<=end_year;i++)
    {
        years.push(i); 
    }
    return years;
  }

What this code does is just skip the labels for certain years but still plots the points on the graph leading to overlapping years on the x-axis.

Any leads on this would be highly appreciated.

Here's the fiddle illustrating my dilemma http://jsfiddle.net/YUPzk/4/

Upvotes: 1

Views: 165

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can use tickPositioner and prepare your own calculating function.
The JavaScript below is one example of how this can be done:
Highcharts.chart('container', { title: { text: 'Custom tick positions' }, subtitle: { text: 'through axis.tickPositions and axis.tickPositioner' }, xAxis: { tickPositions: [0, 1, 2, 4, 8] }, yAxis: { tickPositioner: function () { var positions = [], tick = Math.floor(this.dataMin), increment = Math.ceil((this.dataMax - this.dataMin) / 6); if (this.dataMax !== null && this.dataMin !== null) { for (tick; tick - increment <= this.dataMax; tick += increment) { positions.push(tick); } } return positions; } }, series: [{ data: [ [0, 1],[1, 3],[2, 2],[4, 4],[8, 3] ] }] });

The above demo code can be found at this jsfiddle

Upvotes: 1

Masinde Muliro
Masinde Muliro

Reputation: 1183

For anyone else struggling to get this done, here's what you need because i did lot's of googling with no answers to be found for people experiencing same challenge

Highcharts ; x-axis scaling issue

Upvotes: 0

Related Questions