[charts] PieChart position

[sshologin]

Steps to reproduce

Link to live example: (required)

Current behavior

I tried removing cx, cy, setting width, but it seems that it doesn't work at all. Maybe any props to center PieChart?

Expected behavior

No response

Context

Is it possible to make cx and cy props to be calculated automatically, based on the width of the screen? The problem is that without those props the PieChart is not centered in the container

That's what I have now

That's how it looks on 1200px

Without cx and cy it looks like this

Search keywords: piechart

[michelengelen]

@JCQuintas could you take this one?

[JCQuintas]

Hi @sshologin , could you provide a code example using https://codesandbox.io/ or https://stackblitz.com/ ?

Otherwise you could try removing the margin to center the chart.

    <PieChart
      ...
      margin={{ right: 0 }}
    />

We also have an issue already that is similar to this. Where we intend to allow positioning the chart in center/left/right. Which could be helpful in the future: #13787

[sshologin]

Hi @sshologin , could you provide a code example using https://codesandbox.io/ or https://stackblitz.com/ ?

Otherwise you could try removing the margin to center the chart.

    <PieChart
      ...
      margin={{ right: 0 }}
    />

We also have an issue already that is similar to this. Where we intend to allow positioning the chart in center/left/right. Which could be helpful in the future: #13787

Seems like it was sort of bug, but I changed nothing and now it works really well, I really don't know what happened

Margin right 0 is also good solution for me

                        <Box
                            sx={{
                                display: 'flex',
                                flexDirection: 'row',
                            }}
                        >
                            <PieChart
                                slotProps={{
                                    legend: { hidden: true },
                                }}
                                series={[
                                    {
                                        data: investments.map((investment) => ({
                                            id: investment.id,
                                            value: investment.value,
                                            label: investment.label,
                                            color: investment.color,
                                        })),
                                        paddingAngle: 2,
                                        cornerRadius: 5,
                                        highlightScope: {
                                            faded: 'global',
                                            highlighted: 'item',
                                        },
                                        cx: 130,
                                        cy: 100,
                                        innerRadius: 40,
                                        valueFormatter: (params) => {
                                            const percent =
                                                params.value / totalValue;
                                            return `${(percent * 100).toFixed(
                                                1
                                            )}%`;
                                        },
                                    },
                                ]}
                                width={270}
                                height={200}
                            />
                        </Box>

Also it says that faded and highlighted are deprecated symbol

[JCQuintas]

Glad it worked for you. You can use fade and highlight instead to get rid of the deprecation warning

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

@sshologin: 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.