Question

I have a column graph that uses dates (2/3/2014, 2/10/2014, etc.) as categories. Sometimes there are 4 dates and sometimes there are 20-30 dates. My problem is that once there are 20+ categories the x-axis looks cluttered. Is there a way to limit the display of these categories even if I pass in more than I want displayed?

Let's say I pass in 25 dates that range between 2/1/2014 and 3/15/2014. Is there a way to only display, say 5, of those preferably with equal time between each (ex: 2/1/14,2/10/14,2/20/14,2/28/14,3/10/14,3/15/14)?

Was it helpful?

Solution

Maybe too late, but this should be the function you need:

xAxis: {
   categories: ['1', '2', '3', '4', '5'],
   labels:{
     step: 2 // displays every second category
   }
 }

In your case, you want to set the option at runtime, so:

if(chart.xAxis[0].names.length>12){
   interval=parseInt(chart.xAxis[0].names.length/12);
   chart.xAxis[0].update({labels:{step: interval}});
}

And there is also a option named tickInterval, which could be useful for this.

OTHER TIPS

Turns out I found a pretty simple solution on my own. Here is the code I used to make sure there are no more than 12 displayed categories on my x axis:

//we want a max of 12 labels to avoid clutter
            if(xData.length>12)
            {
                //determine label interval
                interval=parseInt(xData.length/12);
                for(j=0;j<xData.length;j++)
                {
                    if(j%interval==0)
                    {
                        tempLabels.push(xData[j]);  
                    }
                    else
                    {
                        tempLabels.push(' ');       
                    }
                }
                //transfer new labels 
                xData=tempLabels;
            }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top