Description
Feature Proposal
Please add a chart option for Donut/Pie charts that use a circumference less than 360 to position the arcs as if the chart were a full circle.
Currently the chart does a good job of sizing and laying out the arcs to avoid wasted blank space in the canvas so, for example, a chart with circumference 180 would use/need half the size of a full circle. This poses an issue for some use cases that rely on knowledge of the centre of the circle, for example using the chart in a composite component like this:
To highlight the difficulty, here are two charts that are identical, except the one on the left has circumference: 230 and the one on the right has 360. Both charts are contained in a 50x50px div with an outline so the border isn't affecting layout.
Here's another image with the layout difference highlighted by a circle drawn in the centre of each containing rectangle. You can also see the offset centre of the left chart by looking at the gap between the right border and the chart.
I understand that in a lot of cases if the rendering of the chart doesn't need the full canvas area, then it will centre itself (or fill), and that works for most charts. For donut/pie charts less than 360 degrees I feel there's a strong argument and number of use cases that warrant some way to adjust this default behaviour.
Work around
I'm currently using CSS and % offsets to approximate the chart being central to the container, which works in my case but will need more work if the circumference changes. It also feels hacky :(
Possible Implementation
The simplest solution I can think of is to add a property to the donut/pie chart options, something like
{
/**
* Control whether the clipped or extended chart area is used for layout.
* When true, the chart is laid out based on rendered pixels only,
* when false, layout includes the space that would be needed to render the full circumference of the circle.
* Has no effect when circumference is 360.
*/
shrinkwrap: true,
}The name might need some work.
A more comprehensive solution would be to add general layout properties to control how the chart is rendered if given more space than it needs. Maybe something similar to css align and justify flex/grid options. Feels a bit over the top for my use case though.