Pie chart issue - gets cut off at smaller screens OR is too big for container at bigger screens

[xenia1]

Hi,

Tl;dr - pie chart resizing within fixed height box works fine when the legend shows but not when legend is hidden

--

Details:

I have an issue with pie charts sizing within a box that has a fixed height, e.g. 300px (variable width)

When the legend shows, the pie chart resizing as the screen changes size works fine.

Without the legend (I added a button/method to toggle its visibility), one of two things happens:

1. Give pie chart height of 100%, ie.:

      <apexcharts
        type="pie"
        :height="'100%'"
        :options="options"
        :series="series"
      ></apexcharts>

Result - as the screen / box gets narrower, the sides of the pie chart get cropped.

Visual:

2. Give pie chart empty height, i.e. :

      <apexcharts
        type="pie"
        :height="''" // OR omit this line completely
        :options="options"
        :series="series"
      ></apexcharts>

Result - When the box is narrow, the box resizes correctly. BUT when it's wider, the pie chart is way too tall for the box and spills outside.

Visual:

NARROW SCREEN (desired behaviour):

WIDE SCREEN (not desired behaviour):

I tried to replicate the issue, however it's not a perfect replication for the following reason:

With empty height, in my code, when I toggle the legend on/off the chart will resize to be correct with the legend but overflow without the legend. In the fiddle, the FIRST time I hide the legend, the chart becomes too big. But then showing the legend again doesn't make it reset properly. I cannot figure out why the behaviour is not the same.

If the height is 100%, the behaviour is the same in my code and in the fiddle - then the sides get cropped if the box becomes narrow.

Fiddle:
https://codesandbox.io/s/vue-basic-example-forked-xnj1h4?file=/src/components/Chart.component.vue

Conclusion:
Does anyone have any advice on what kind of height value I can give the chart/what kind of code structure I can have so that when the legend is hidden, the chart sized correctly and adjusts as the screen width changes?

In other words, is there any way that when the chart (without a legend) is in a fixed height box, it can fit into that box and resize correctly according to the width of the box?

Can the resizing can work the same whether the legend is visible or not?

Thanks! And let me know if you require any more details.