[charts] Pie chart overflow with legend about mui-x HOT 5 OPEN

On large screens, the subtitles are clearly visible, but when I reduce the screen,the subtitles are scrambled in the chart.

You can use the margin={{ right: 150 }} (or other value, or top, left, bottom) to restrain the space available to draw the pie (end then free some space for the legend)

Here is an example, where you can modify right.
https://codesandbox.io/p/sandbox/charming-blackburn-tl5yvr?file=%2Fsrc%2FDemo.tsx%3A11%2C12

At right: 50 it overflows. But at 150 it let enough space for the legend

Does that solves your issue?

from mui-x.

Hello, how are you?
So, maybe it will help a bit, but I ended up choosing to put the subtitles at the bottom and hide them when the screen is smaller:

import React from 'react'
import { ChartProps } from './types'
import { PieChart } from '@mui/x-charts/PieChart';
import { Box } from '@material-ui/core';

export const Chart : React.FC<ChartProps> = (props) => {

 const [ isHidden, setIsHidden ] = React.useState<boolean>(false);
 const { items } = props;
 const chartItems = (items.length === 1 && items[0].value === 0) ? [{id: items[0].id, label: items[0].label, value: 0.001}] : items;
 const size = {height: 450}

 const handleResize = () => {
  if(window && window.innerWidth < 950) setIsHidden(true);
  else setIsHidden(false);
 }

 React.useEffect(()=>{
  window.addEventListener('resize', handleResize);
  handleResize();

  return () => {
    window.removeEventListener('resize',handleResize)
  }
 },[])

  return (
    <Box sx={{ width: '100%', height: '100%' }}>
      <PieChart
        series={[
          {
            data: chartItems,
            innerRadius: '50%',
            highlightScope: { faded: 'global', highlighted: 'item' },
          },
        ]}
        slotProps={{
          legend: {
            hidden: isHidden,
            direction: 'row',
            position: { vertical: 'bottom', horizontal: 'middle' },
            padding: 0,
            labelStyle:{
              fontSize: 14
            },
            itemMarkWidth: 11,
            itemMarkHeight: 10,
          },
        }}
        margin={{ top: 100, bottom: 100, left: 100, right: 100 }}
        {...size}
      />
    </Box>
  );
}

In this case it helped, but I missed being able to manipulate the pieChart responsively, having control over its size and being able to edit the captions better. At first the idea was to have a personalized caption with a table, but as it was a bit obscure to manipulate the component, I opted to leave the caption below and create a separate explanatory table.

from mui-x.

At first the idea was to have a personalized caption with a table

The legend is currently in the SVG, so drawing a table might be complex.
At that level of customization, the easiest might be to create your legend with HTML and display it next to the chart, and hide the legend

from mui-x.

Great, but how can I insert a new html into the chart? and even more, how can I get item by item, because I imagine that to draw an html table I would need to get the color of the item, the label and the value and iterate over the table.
Are there any props that ChartPie accepts that I can do this with? Or any props that it exposes that I can manipulate?

from mui-x.

You don't need to put it in. You can put it out

function ChartsWithLegend() {
  <div>
    <PieChart />
    <MyLegend />
  </div>
}

how can I get item by item

You are providing the items to chat <PieChart/> so you have acce to them.

The only thing we defaultize is the color. Either you force them in the charts with <PieChart colors={[....]} />

or you can use the default one import { blueberryTwilightPalette } from '@mui/x-charts/colorPalettes';

from mui-x.