How do I make the legend on a mui5 PIE Chart behave like this?

Question

I'm relatively new to React, and I've been tasked with creating a pie chart with a specific behavior, as illustrated in the image below:

The desired behavior includes displaying legend items in columns at the bottom of the chart, allowing for "n" rows that expand upon clicking "expand more," revealing all items in the legend. And the marker for each item in the legend being a circle instead of the default rectangle.

Here's the current behavior I've achieved:

Here's the code I've used so far:

        <PieChart
      series={[{ data: data, innerRadius: 70, outerRadius: 85 }]}
      colors={colors}
      width={350}
      height={350}
      margin={{ right: 0, top: 0 }}
      slotProps={{
        legend: {
          labelStyle: {
            tableLayout: 'fixed',
          },
          direction: 'row',
          position: {
            horizontal: 'middle',
            vertical: 'bottom',
          },
        },
      }}
      sx={{}}
    />

I've explored various options to control the legend and the pie chart's behavior but haven't found a way to achieve the desired functionality directly. One workaround could be hiding the built-in legend and creating a custom one using a data grid below the chart, but I would rather not do that I would rather achieve the behavior with just the PieChart and the legend if possible.

If anyone has insights or suggestions on how to achieve the desired legend behavior directly with the PieChart and legend components, I would greatly appreciate it.

Thank you!

Answer 1

You could just turn off the legend and add legend manually like this:

export const LegendItem = ({ color, label}: any) => {
return (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="9"
    height="9"
    viewBox="0 0 9 9"
    fill="none"
  >
    <circle cx="4.5" cy="4.8689" r="4" fill={color} />
  </svg>   
  <span>{label}</span>
 );
}

Then in the main page :

<LegendItem
        color="red"
        label="Javascript"
      />
 <LegendItem
        color="blue"
        label="Javascript"
      />

This is much easier to style, then you can control how many you want to display initially then on link click, display more.