Is it possible to truncate legend items in Highcharts/Highstock

css, highcharts, html, javascript

Solution

It's possible to do anything with labels in legend, just use labelFormatter function.

// ... initialization of chart
legend: {
    labelFormatter: function() {
        // do truncation here and return string
        // this.name holds the whole label
        // for example:
        return this.name.slice(0, 15)+'...'
    }
}

Here's working example http://jsbin.com/oyicuc/12/edit

Edit (based on comments below).

If you want better control of how text of labels behave, set useHTML property to true (in legend configuration of chart), and then you can target it better with css. Here's example of it http://jsbin.com/oyicuc/20/edit.

To make it responsive, you can listen to redraw events of chart and modify css of labels accordingly.

Problem

Working with a responsive site where the page width can shrink and expand, is it possible for items in the legend to truncate? Series titles could be quite long, so ideally I would want to set the legend items to be around 95% of the chart and then add ellipsis if they are too long. I've tried using HTML for the legend and applying ellipsis with CSS however this is not working. Any help would be great, thanks.

Original source