Is it possible to truncate legend items in Highcharts/Highstock

Question

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.

Answer 1

Latest (4.1.1) version of Highcharts supports inline styles for truncation. So you can do this:

legend:{
    itemStyle: {
            width:'50px',
            textOverflow: 'ellipsis',
            overflow: 'hidden'
        }  
}

http://jsfiddle.net/awq913h1/

---

Related github issue: https://github.com/highcharts/highcharts/issues/3331
Related JsFiddle: http://jsfiddle.net/highcharts/d4johssh/

Answer 2

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.

Answer 3

This is similar to @WTK's answer, but it only truncates labels longer than a desired length.

formatter: function () {
    //Truncate very long labels
    var max = 20;
    var val = this.value;
    return (val.length > max ? val.slice(0, max) + '...' : val);
}

Answer 4

I took WTK's solution (thanks for it by the way) and added a couple of simple things to it - thought it might help someone. (edit: whoops - missed Chris's post - similar to his also but with width considerations)

1. Specified the width of the margin on the left of the chart - this dictates how much space the labels have - this is important if you have a chart that scales horizontally to your page - truncating at a certain character limit will cause issues if the area for the labels isn't big enough.

2. Specified the tick length to match the margin.

3. Checked the length of the string - if it's bigger than what I want (ie if it is going to wrap/cause issues) I truncate it - otherwise there's no point appending the ellipses (...) to it. This means essentially:

   • Check if it is 24 (in my case) characters long, if it is truncate it three chars shorter (21) and append the ellipses to the temp value. Making a 24 char label and a truncated label still look similar in length. If the length isn't over 24 - no truncate is required and temp var is set to full length of the string.

   • Instead of just spitting out a truncated version of the label, I wrap the label in a span with a title. Allowing users to mouse over the label and get the full name of the value.

4. useHTML output for the span/title.

Hope this helps someone :)

chart: {
    // usual setup stuff here
    marginLeft: 160 // #1
}

// ...

xAxis: {
    // ...
    tickLength: 160, // #2
    labels: {
        // ...
        formatter: function() {
            var temp = this.value.length > 24 ? this.value.slice(0, 21)+'...' : this.value; // #3
            return '<span title="Investment breakdown for '+ this.value +'">' + temp + '</span>'; // #3
        },
        useHTML: true // #4
}