Search code examples
reactjsmaterial-uimui-xmui-x-charts

Custom Aligning of Legends in MUI Pie Charts

I have a MUI Pie chart and i would like to align all the legends of the pie charts in a single line and want the space between each legends to reduce.

When i try giving Padding in the slotprops property of the it is not getting reflected.

working example

Any idea on how to remove the padding between the legends is much appreciated

Thanks

Solution

  • Your original code looks like it has the props needed to adjust the gap between legend items, you just have it in the wrong place. I believe the specific prop you're looking for is slotProps.legend.itemGap (Your legend props are directly under slotProps instead of slotProps.legend). Moving the props and adjusting the settings should give you what you need:

    slotProps={{
  legend: {
    direction: "column",
    position: {
      vertical: "middle",
      horizontal: "right",
    },
    itemMarkWidth: 10,
    itemMarkHeight: 10,
    markGap: 3,
    itemGap: 3,
    labelStyle: { fontSize: 12 },
  },
}}

    Results in:

    enter image description here

    Working CodeSandbox:

    https://codesandbox.io/p/sandbox/musing-dawn-zvzxhk

    Reference:

    https://mui.com/x/react-charts/legend/#dimensions