How to wrap legend items in highcharts?

Viewed 41111

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>
8 Answers

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.

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.

Related