Highcharts overlapping category labels

Question

I need help with a problem with category labels for xAxis. When there is no room for all the category labels, they get crammed together and overlap each other.

I have searched to see if I could find some way to ensure that this does not happen, first I looked for a scrolling solution, then some sort of zooming, and eventually I tried to go for staggerLines.

The problem is, if I am to use staggerLines, I need to set the value depending on the number of categories I have. If I have 10 or less, staggerLine value is set to 1, 11-20 I want it stet to 2, 21-30 I want to set it to 3 and so on. I can not simply just set it to 3, because some times it will be just a few categories shown, and that won't look good with staggerLines.

Anyone have a good suggestion for how to solve this?

Answer 1

You don't have to use categories at all. In general categories are good to show e.g. fruits, or names - how to define which name should be displayed, and which shouldn't? Is apple more important than banana?

However, solution is pretty simple, using xAxis label formatter, take a look: http://jsbin.com/oyudan/27/edit

xAxis: {
  labels: {
    formatter: function(){
      return names[this.value];
    }
  }
},