[charts] Overlap on legend in ResponsiveChartContainer

[MainaMwangiy]

Steps to reproduce

Link to live example: (required)

Steps: Have a legend with different categories like 20 of them for a multi-line charts. The legend options overlap with the lines. Check attached screenshot.

Current behavior

Not able to style the legend when they overlap with the lines.

Expected behavior

Should be able to add mui styles for margin or padding.
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: overlap of legend in line charts

[michelengelen]

Hey @MainaMwangiy
I can confirm this bug.
It is added to the board for the team to have a look!
Thanks for raising this!

[alexfauquette]

The legend and the drawing area are not related.you can free some additional space to the legend by modifying the margin.top https://mui.com/x/react-charts/styling/#placement

[MainaMwangiy]

Thanks @alexfauquette margin fixed my issue.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@MainaMwangiy: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.