1

I am using sunbursts in highcharts where I needed to customize my legends. As part of this, I have legends starting from 0 items ( an empty chart) to any where near 15 legend items.

I see that legends provide a maxHeight property to set max height, but it doesnt provide an option like minHeight. I tried giving a custom class to legends, and give height directly to it but it didnt work out well. Its not even honoring it.

If i give maxheight, when only 1 legend item is available, chart is resizing. I dont want to give a specific height to my chart as it will be driven by parent element.

If anyone has any idea of how to tackle this, it would be greatful. Thanks in advance.

This is what I have tried so far. Below is the sample link
https://codesandbox.io/s/highcharts-react-demo-forked-p1okt5?file=/demo.jsx

usha
  • 13
  • 2
  • There is no option in the api to set the min height of the legend, the legend adjusts relative to the height of the chart. Do you want to reserve a specific height for the legend elements, whether it be 1 or 10 to be? – Sebastian Hajdus Nov 16 '22 at 10:25
  • Yeah. I need to fix the legend container height say 10% of total height. If number of legends is 1, it still will stay 10% and doesnt shrink. and if number of legends are 10, it still stays the same and show the default pagination option. – usha Nov 17 '22 at 04:42

1 Answers1

0

A workaround might be to set spacingBottom which will give you the option to reserve space for the legend and set maxHeight.

  chart: {
    spacingBottom: 100,
  },
  legend: {
    maxHeight: 40,
  },

Demo: https://jsfiddle.net/BlackLabel/hL9ofjks/1/

You can set all this for dynamic changes when loading the chart in chart.events.load, below is an example of how you can write functions to calculate new maxHeight.

  chart: {
    spacingBottom: 100,
    events: {
      load: function() {
        let legend = this.legend,
          itemHeight = this.legend.allItems[0].legendGroup.element.getBBox().height,
          navHeight = this.legend.nav.element.children[2].getBBox().height,
          avHeight = legend.options.maxHeight - navHeight,
          totalHeight = itemHeight,
          numberOfRows = 0;

        while (totalHeight < avHeight) {
          totalHeight += itemHeight;
          numberOfRows++;
        }

        legend.update({
          maxHeight: (numberOfRows * itemHeight) + navHeight
        });
      }
    }
  },
Sebastian Hajdus
  • 1,422
  • 1
  • 5
  • 14