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.14k stars 1.29k forks source link

[charts][BarChart] x axis labels being hidden when resizing #13134

Closed FrancisEgan closed 5 months ago

FrancisEgan commented 5 months ago

Steps to reproduce

https://codesandbox.io/p/sandbox/bold-meadow-pxmjj6

  1. Resize browser window and make it smaller horizontally
  2. Observe x axis label disappearing (from the DOM entirely)

Current behavior

The x axis labels get hidden at certain points

image

Expected behavior

x axis labels overlap, or wrap

Context

If the elements at least remained in the DOM then some workaround could be applied. The labels could be rotated to fit, for example. This is impossible when the elements are no longer present on the DOM

Your environment

System: OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm) Binaries: Node: 20.9.0 - /usr/local/bin/node npm: 9.8.1 - /usr/local/bin/npm pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.11.4 => 11.11.4 @emotion/styled: 11.11.5 => 11.11.5 @mui/material: 5.15.17 => 5.15.17 @mui/x-charts: 7.4.0 => 7.4.0 @types/react: 18.2.38 => 18.2.38 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.4.4 => 4.4.4

Search keywords: bar chart x axis labels

michelengelen commented 5 months ago

@alexfauquette correct me if I am wrong, but this is expected behavior. The labels will get removed when there is not enough space to display them.

If you change the labels to '$1000-$1999', ..., '$x000-$x999' so very similar in length you can see that the chart tries to render only those that have enough space. It looks like it will also try to render the ones that make the most sense (e.g. not remove the middle one)

Can we maybe improve on this @mui/xcharts ?

alexfauquette commented 5 months ago

Exactly. The behavior is to start from the left part of the axis, and do not display label if it overflow with the previous one, and repeat the operation

You can see it in action here: https://mui.com/x/react-charts/axis/#text-customization Modifying the font size of the x-axis label impacts how many label are visible

image image

github-actions[bot] commented 5 months ago

:warning: 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.

@FrancisEgan: 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.

FrancisEgan commented 5 months ago

Setting the font size to 9px does indeed allow the chart to be smaller, but introduces an accessibility problem - we can't go under 12px for the font size. Could there not be an option to disable the hiding behavior, or at least keep the elements in the DOM with display none?

alexfauquette commented 5 months ago

You can use the tickLabelInterval to override the default behavior.

Adding tickLabelInterval: () => true to the axis config will force it to render every tick label.

https://codesandbox.io/p/sandbox/elated-galileo-f452wk?file=%2Fsrc%2FApp.tsx%3A13%2C15

github-actions[bot] commented 5 months ago

:warning: 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.

@FrancisEgan: 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.