[charts] Bar chart bottom legend is not well positioned

[Sozialarchiv]

Steps to reproduce

Link to live example: (required)

 <BarChart
                xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
                series={[{ data: [4, 3, 5], label: 'aa' }, { data: [1, 6, 3], label: 'bb' }, { data: [2, 5, 6], label: 'cc' }]}
                width={500}
                height={300}
                slotProps={{
                    legend: {position: {horizontal: 'middle', vertical: 'bottom'}}
                }}
            />

Steps:

1. Bar chart with legend on bottom

Current behavior

Legend is over the chart

Expected behavior

Legend should be under the chart

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: bar chart legend bottom

[michelengelen]

Thanks @Sozialarchiv for reporting. I have put it on our board to have a look at how we can improve this. Thanks again 🙇🏼

[alexfauquette]

The issue is that the legend is position relatively to the svg container. It does not take care of the drawing area.

Since you move the legend from the bottom, you can modify the drawing area as follow:

margin={{
      top: 10, // get more space from the top since we don't have legend to display now
      bottom: 75, // Add some space to let the legend be visible
    }}

https://stackblitz.com/edit/react-hsvjub?file=Demo.tsx

[michelengelen]

Oh, nice! Thanks for the example @alexfauquette

[Sozialarchiv]

Thank you very much for the good and fast answer.
I will create an pro account to honor your great work.

---

The issue is that the legend is position relatively to the svg container. It does not take care of the drawing area.

Maybe it would be helpful for others to make this possibility more notable in the doc. For me this ticket is solved.