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 cx and cy props the PieChart is not in the middle of the container
That’s what I have now enter image description here
That’s how it looks on 1200px enter image description here
Without cx and cy it looks like so enter image description here

return (
        <Card
            variant="outlined"
            sx={{
                borderRadius: '16px',
                width: isLarge ? '100%' : '31.5%',
                maxWidth: isLarge ? 'auto' : '304px',
            }}
        >
            <Box
                sx={{
                    padding: '16px',
                    display: 'flex',
                    flexDirection: 'column',
                }}
            >
                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                    <Typography variant="manrope_14" sx={{ fontWeight: '500' }}>
                        Portfolio revenue
                    </Typography>
                    <IconButton sx={{ padding: '6px' }}>
                        <InfoOutlinedIcon
                            color="primary"
                            sx={{ width: '20px', height: '20px' }}
                        />
                    </IconButton>
                </Box>
                <PieChart
                    slotProps={{
                        legend: { hidden: true },
                    }}
                    series={[
                        {
                            data: investments.map((investment) => ({
                                id: investment.id,
                                value: investment.value,
                                label: investment.label,
                                color: investment.color,
                            })),
                            innerRadius: 40,
                            valueFormatter: (params) => {
                                const percent = params.value / totalValue;
                                return `${(percent * 100).toFixed(1)}%`;
                            },
                        },
                    ]}
                    height={230}
                />
                <Box
                    sx={{
                        display: 'flex',
                        flexDirection: 'column',
                    }}
                >
                    {investments.map((item) => (
                        <Box
                            key={item.id}
                            sx={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                            }}
                        >
                            <Box
                                sx={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    alignItems: 'center',
                                    padding: '2px 8px',
                                    gap: '5px',
                                }}
                            >
                                <CircleIcon
                                    sx={{
                                        color: item.color,
                                        width: '6px',
                                        height: '6px',
                                    }}
                                />
                                <Typography variant="custom_caption_manrope">
                                    {capitalizeFirstLetter(item.label)}
                                </Typography>
                            </Box>
                            <Typography
                                variant="body2"
                                sx={{ fontWeight: 'bold' }}
                            >
                                {getPercent(item.value)}
                            </Typography>
                        </Box>
                    ))}
                </Box>
            </Box>
        </Card>
    );

I tried removing cx, cy, setting width, but it seems that it doesn’t work at all. Maybe any props to set PieChart in the middle ?