Highcharts x axis label text wrapping lost on sett

Question

I have a problem with the Highcharts label wrapping on the X axis .It is lost on setting the label step property as shown in the links below

Correct: http://jsfiddle.net/Bimal/45Lp3/

Incorrect: http://jsfiddle.net/ahwmv/

 $(function () {
$('#container').highcharts({

    chart: {
    },

    xAxis: {
        categories: ['Apple Orange: PineApple Mango Grapes (% of Sales)', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        labels: {
            step: 1
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

});

When xAxis.labels.step is set to its default null value ,the text wrapping is done . Please suggest a way to maintain the wrapping when the labels step is given a numeric value.

Thanks

Answer 1

It's a bit of a hack, but you could replace each space in the name with <br /> by using the formatter:

labels: {
    step: 1,
    formatter: function () {
        return this.value.replace(/ /g, '<br />');
    }
}

It's not exactly what you want as it doesn't split the name according to the space available between ticks, but maybe you can improve the formatter to better suit your needs (splitting by a given n characters for example instead of by space).

See it running here.

Answer 2

You can use width paramter for labales:

http://jsfiddle.net/ahwmv/2/

labels: {
            style:{
                width:'50px',
            },
            step: 1
        }