无法在 Highcharts 中设置图例的最小高度

Question

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

Answer 1

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
        });
      }
    }
  },