VictoryPie Chart is not Responsive (Constrained) to Parent's Width

[geirman]

Ok, I think I'm ready to call this a bug...
https://twitter.com/geirmanc/status/895396018337882112

According to the VictoryContainer Docs...

• The container is Responsive by Default
• "In responsive containers, the width and height props affect the aspect ratio of the rendered component"

Yet no matter what I've tried, I've been unsuccessful in solving the following VictoryPie render issues

• too much padding to the left
• chart bleeds off to the right (not constrained to it's parent)
• not centered between the available, visible width of the parent.

Setting the width, as described in the docs, does not change the aspect ratio of the container, but instead clips the right edge of the chart. Here's an image to further demonstrate the problem.

• The code can be found on github here
• Demo on Expo here

[boygirl]

@geirman sorry for the delay. I took a look at your demo code, and I noticed a potential problem which is that you're placing the height prop directly on the container rather than letting that be controlled by VictoryPie. The pie elements are absolutely positioned within the svg, and positioning is controlled by VictoryPie using width / height / padding.

This issue did also expose a bug in asymmetric pie padding, which I have fixed here: FormidableLabs/victory-pie#153

I can see why you're setting the height directly on the container to avoid creating a container that would normally fit a whole pie, when you're rendering only half. This trick will only work when your height is exactly 1/2 your width. I will open a new discussion / feature request for calculating positions differently when only 1/2 a pie will be rendered, but this would be a breaking change for VictoryPie.