How to wrap legend items in highcharts?

Question

I have a big problem using highcharts, because I have been trying for hours to wrap legend items if they very long.

I have tried to set legend and legend item width, but my text still get out from a legend. Only thing that I found is to change highcharts.src.js but I think that's not a way to solve this problem.

Here my code:

<script type="text/javascript">
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'graph_container',
        defaultSeriesType: 'line',
        zoomType: 'y',
        marginRight: 130,
        marginBottom: $ {
          marginBottom
        }
      },
      title: {
        x: -10,
        text: null
      },
      xAxis: {
        title: {
          text: '<fmt:message key="html.time" bundle="${msg}"/>',
          align: 'high'
        },
        categories: [$ {
          years
        }]
      },
      yAxis: {
        title: {
          text: '<fmt:message key="html.value" bundle="${msg}"/>',
          align: 'high'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        style: {
          fontSize: '9pt',
          width: '400px', //,
          wrap: 'hard'
        },
        formatter: function() {
          return '<b>' + this.series.name + '<br>' +
            +this.x + ': ' + this.y + '</b>';
        }
      },
      legend: {
        layout: 'vertical',
        width: 600,
        floating: true,
        align: 'center',
        verticalAlign: 'bottom',
        borderWidth: 1,
        itemWidth: '500px'

      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      series: [ <
        c: forEach items = "${graphValues}"
        var = "value"
        varStatus = "counter" >
        <
        c: if test = "${counter.count != 1}" > , < /c:if> {
          name: '${value.name}',
          data: $ {
            value.jsonData
          }
        } <
        /c:forEach>
      ]
    });


  });
</script>

Answer 1

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.

Answer 2

You can use:

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

And Highcharts will wrap the items for you.

Answer 3

Way to wrap long legend name

legend: {
    enabled: true,
    width:555,
    itemWidth:500,
    itemStyle: {
        width:500
    }
}

Answer 4

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.

Answer 5

Setting the itemStyle on the legend has a bug. Long labels with no spaces still don't wrap.

Here is a label renderer function that wraps to a specific number of characters (I hard coded 20 into it) and will force a break in words that are longer than that:

function hcLabelRender(){
    var s = this.name;
    var r = "";
    var lastAppended = 0;
    var lastSpace = -1;
    for (var i = 0; i < s.length; i++) {
        if (s.charAt(i) == ' ') lastSpace = i;
        if (i - lastAppended > 20) {
            if (lastSpace == -1) lastSpace = i;
            r += s.substring(lastAppended, lastSpace);
            lastAppended = lastSpace;
            lastSpace = -1;
            r += "<br>";
        }
    }
    r += s.substring(lastAppended, s.length);
    return r;
}

It can be used like:

legend:{
    labelFormatter: hcLabelRender
}

Answer 6

If you want all items on their own lines, you can use

legend: {
    layout: "vertical"
}

Answer 7

You can use

labelFormatter: function() {
    return this.name; // insert your formatter function here
}

in your label and you can add html tags in the formatter. In this case you can add <br> tags to manually break lines.

Please see: http://www.highcharts.com/ref/#legend--labelFormatter

Answer 8

For anyone else using the useHTML option, you'll run into an issue with the default textOverflow: "ellipsis" setting messing with your wrapping.

As teran noted above, setting textOverflow: null inside itemStyle will instantly fix your wrapping when useHTML is enabled and you're trying to wrap custom HTML you've written inside legendFormatter().

Without this, the default truncation doesn't apply to your HTML (e.g. not a string) and just acts like you have overflow: hidden set.