[charts] Pie Chart Positioning

[josh-thompson13]

The problem in depth

The legend on my PieChart is overlapping my pie chart. I need a way to ensure my PieChart is as far left as possible. If I set the cx value to 150 that works, however this component will come in varying sizes and therefore I cannot use a fixed value here.

In the image I've supplied you can see the piechart has been given permission to take 75% of the width. So I want the legend to stay in the same spot, but the piechart itself to be moved left. How can I achieve this? Here's my code.

return (
        <>
            <PieChart
                series={dataSeries}
                onItemClick={(event, i) => tapMarker(i.dataIndex)}
                leftAxis={{ position: "left" }}
                style={{ left: 0 }}
            />

            
        </>
    );

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Pie Chart Positioning
Order ID:

[alexfauquette]

You can restrain the area available for the pie by adding a margin props But this is also a fixed placement

The issue with positioning the pie on the left is that the cx position will depend on the height of the drawing area which is not possible for now.

Maybe a solution could be to modify that computation of percent values such that cx='0%' does not mean "the pie center is at the left of the drawing area" but "the pie touch the left of the drawing area while being totally visible"

[michelengelen]

@alexfauquette should we add this to the board?