[charts] legend padding in pie chart V7 was removed in V8, but there is not mention about the alternative of it migration doucmention

[bitcrafterhub]

Steps to reproduce

This the padding from Pie chart of V7

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

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

Search keywords: piecharts

[bernardobelchior]

In v8, the legend became an HTML element. As such, you can apply the padding property like you would to any HTML element.

import { PieChart } from '@mui/x-charts/PieChart';
import { legendClasses } from '@mui/x-charts/ChartsLegend';

<PieChart
  {/** ... */}
  sx={{
    [`.${legendClasses.root}`]: {
      padding: 8,
    },
  }}
/>

Does that work for your use case?

[bitcrafterhub]

After using the padding in the way as above mentioned, the old behaviour was not retained, earlier it used to increase or decrease between the svg and legend, but now it's doing the opposite

[bernardobelchior]

Could you provide a reproduction? It would allow us to better understand the issue and provide suggestions.

From looking at that image, I'd assume the padding being set is too large, but I can't be sure without looking at the code

[bitcrafterhub]

check this V7 implementation - https://codesandbox.io/p/sandbox/mui-x-piechart-v7-gmltdd
change the padding mentioned here

for V8 - https://codesandbox.io/p/devbox/mui-x-piechart-legend-example-forked-tt4gqd?file=%2Fsrc%2FApp.tsx%3A67%2C23

keep the same padding number, u will see the difference in the behaviour

[bernardobelchior]

Thanks for the CodeSandbox! I don't think I have access to your second example, though:

---

Nevertheless, can you try padding: '70px' on v8? Does that work?

[bitcrafterhub]

i can give the access
after applying padding 70, if u see the design is not same any more

i made this public now
https://codesandbox.io/p/devbox/mui-x-piechart-legend-example-forked-tt4gqd

[bernardobelchior]

In v8, the chart and the legend are part of a display: 'grid'. The legend will take its spaces and the chart will fill the remaining space.

I used padding: '16px' and it seems to look good, but I guess that depends on your designs.

Due to the new structure you need to adjust the values so that they closely resemble your target design.

Could you explain what's your goal? If it's adjusting the padding, I'd recommend trying out different values so it looks like the example in v7.