Highcharts problem - showing labels in zoomable chart

Question

I have a zoom column chart with more then 200 categories in xAxis. Consequently, when it is in the initial state (scale 1:1), all these guys are shown under the X axis, and it's impossible to read anything even if I place them vertically. I need to zoom the chart to make the labels visible.

Here's screenshot of the problem:

Here's my code: http://jsfiddle.net/sherlock85/hJcQm/

Is it possible to adjust the concentration of the labels (perhaps change the step automatically) depending on a zoom level?

I would really appreciate your help.

Thanks, Andrzej

Answer 1

In order from easiest to most difficult...

Since your categories are mostly numeric (e.g. 'mir001'), you could omit the categories, which would prevent them from all being displayed. They would then show 1, 2, 3, and so on.

Alternatively, you could remove the categories and use a label formatter. In this case, you could do something like this, again taking advantage of the fact that the labels appear to be numeric and increasing:

chart = new Highcharts.Chart({
    xaxis: {
        labels: {
            formatter: function() {
                return "mir" + this.value;
            }
        }
    }
});

Both of the above would reduce the number of labels (the labels would follow some pattern such as 1, 50, 100, until zoomed).

If you wanted to be very particular about the labels, you would have to use the label formatter and do some math to find the scale of the graph to determine how the labels should be displayed. You could, for example, do something like this, though it is quite convoluted:

var categories = [] //have your categories as a separate list
var buckets = 4; 
var labelFormatter = function(frequency) {
    var count = 0;
    frequency = frequency || 0;
    return function () {
        count++;
        if ((count > frequency) || (frequency < 1)) {
                return this.value
        }
    }
};

chart = new Highcharts.Chart({
    zoomtype: 'x',
    events: {
        selection: function(event) {
            if (event.xAxis) {
                var scale = event.xAxis[0];
                var frequency = Math.floor((scale.max - scale.min) / buckets)
                this.xaxis[0].labels.formatter = labelFormatter(frequency);
            }
        }
    },
    xaxis: {
        labels: {
            formatter: labelFormatter(Math.floor(categories.length/buckets))
        }
    }
});

I should point out that the last solution doesn't exactly work, further illustrating how difficult it is.