How to wrap legend items in highcharts?

You can use:

legend: {
    itemStyle: {
        width: 90 // or whatever
    },
}

And Highcharts will wrap the items for you.


as a note, in 2017 you can use textOverflow option

legend.itemStyle

CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text. The default textOverflow property makes long texts truncate. Set it to null to wrap text instead.


Edit: Actually setting the item width did work, probably a better solution.

Setting the itemWidth doesn't work for me, however you can do something like this:

labelFormatter: function() {
    var words = this.name.split(/[\s]+/);
    var numWordsPerLine = 4;
    var str = [];

    for (var word in words) {
        if (word > 0 && word % numWordsPerLine == 0)
            str.push('<br>');

        str.push(words[word]);
    }

    return str.join(' ');
}

See http://jsfiddle.net/ArmRM/13520/ for an example.