search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.04k stars 1.24k forks source link

[charts] BarChart legend overlaps charts area #13898

Closed ThomasDev28 closed 1 month ago

ThomasDev28 commented 1 month ago

Steps to reproduce

Link to live example: (required)

Steps:

  1. Go to https://mui.com/x/react-charts/bars/#animation
  2. Pass Number of series value to 10
  3. Check the second line of the legends
Capture d’écran 2024-07-19 à 10 20 36

Current behavior

Currently the rendering of the component is only suitable for a single caption line no more

Expected behavior

The rendering of the component should handle the case of a multi-line legend so that the legend does not encroach on the graph. Also being able to define the location of the legend location would be top ( 'top' | 'bottom' | 'left | 'right')

Context

No response

Search keywords: @mui/x-charts

michelengelen commented 1 month ago

@JCQuintas could you help out here please? I know that Legend placement could be adjusted, but could not find anything about increasing gap between the chart area and legend!

JCQuintas commented 1 month ago

related to this legend issue https://github.com/mui/mui-x/issues/13648

You can use something like margin={{ top: 100 }} to add a padding between the chart and legend for now. Though that is not very dynamic, it is the only solution right now.

github-actions[bot] commented 1 month ago

The issue has been inactive for 7 days and has been automatically closed.