Is it possible to truncate legend items in Highcharts/Highstock

By : hcharge

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.

By : hcharge


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 

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 
By : boars

This video can help you solving your question :)
By: admin