[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?

[alexfauquette]

@josh-thompson13 This issue got fixed by an unexpected manner.

In v8 the legend is an HTML component. Sinc the SVG and the legend are now indepent, you have a full control on the layout.
You can already test it on https://next.mui.com/x/react-charts/pie/

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@josh-thompson13 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.