CODEWITHSUNDEEP
legend
Sabira
Sabira

Reputation: 103

how to set max legend width

I have right aligned legend and I need to give it max width 25% of whole chart container. I've tried set width to 25% but in case when my series name is short legend box still stays as 25% but should be equal to content width. So I am looking for maxWidth property if it exist. I am in styled mode. Here is the the code http://jsfiddle.net/sabira/xmcqjnvg/24/ 

Highcharts.chart('container', {
        chart: {
        styledMode: true,
    },
    legend: {
        align: 'right',
      layout: 'proximate',
    },
    series: [{
      name: 'very long long long long long name',
      data: [1, 4, 3, 5],
     },
    {
        name: 'short',
        data: [3, 5, 3, 1],
    }]
    });

Upvotes: 1

Views: 1090

Answers (2)

Aqib Mapari
Aqib Mapari

Reputation: 153

For some one looking for an easier alternative to this just use itemWidth property of legend.

legend:{ itemWidth: 100 }

Updated Fiddle: http://jsfiddle.net/3mvpbu1f/

Upvotes: 1

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

The legend.maxWidth property doesn't exist. However, it can be achieved by checking legend width in the chart load event and update it when it is bigger than eg. '25%' of the chart width.

Code:

  chart: {
    styledMode: true,
    events: {
      load: function() {
        var chart = this,
          legend = chart.legend,
          legendMaxWidth =
            Highcharts.relativeLength(legend.options.maxWidth, 1) * chart.chartWidth;

        if (legend.legendWidth > legendMaxWidth) {
          legend.update({
            width: legend.options.maxWidth
          });
        }
      }
    }
  }

Demo:

API reference:

Upvotes: 2

Related Questions