White Space Around a Chart

[kaplanmichael]

Hello! First wanted to say to @plouc , thanks so much for all of your hard work on this library. I'm really enjoying using it!

I have a small issue that perhaps someone can help with. I'm building a responsive radial bar chart at the moment, and I've used the startAngle and endAngle props to cause it to appear like a gauge chart. Everything is looking great so far, but I can't seem to figure out how to get the chart to fit into its parent container without any white space beneath it. Currently, if I try to reduce the height of the parent container, the entire chart shrinks. What I'm trying to do though is to make the parent container the same size as the chart so that I can more easily position them on the screen along-side other page elements, and to make the chart the exact size that I need.

I've probably missed something very simple. Thanks in advance for any suggestions!

[plouc]

Hello @kaplanmichael! And thank you.

The pie chart support such feature via the fit property, by the radial bar doesn't, I didn't implement it as it's a bit complex. But I guess it might be feasible to port this logic to the radial bar.

[kaplanmichael]

Ah, OK that makes sense. I didn't think to ask this earlier, but if I switch to a regular radial bar chart versus the responsive one, will it still shrink as described above?

I can probably position: absolute the chart within its container so that the whitespace won't affect the overall layout of the page. I'll give that a try first and then maybe we won't need to worry about the 'fit' prop for now!

[plouc]

Yes, the responsive version only makes the outer box responsive, but it will still behave like a full circle within this box.