[charts][Linechart] Horizontal overflow on mobile #12905
Labels
component: charts
This is the name of the generic UI component, not the React module!
status: waiting for author
Issue with insufficient information
Steps to reproduce
Live preview:
https://stackblitz.com/edit/github-v1yiup?file=src%2FApp.tsx
Make application window size a bit smaller (as you would expect on a mobile device).
Go to the middle of the graph and try to see the label.
Current behavior
Tooltip overflow to the right of a page.
Expected behavior
Tooltip to render on another side or if it's not possible to break to multiple lines
Context
Your environment
System: OS: Windows 11 10.0.22631 Binaries: Node: 20.10.0 - C:\Program Files\nodejs\node.EXE npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (123.0.2420.97) npmPackages: @emotion/react: ^11.11.3 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.32 @mui/core-downloads-tracker: 5.15.5 @mui/icons-material: ^5.14.5 => 5.15.5 @mui/material: ^5.15.4 => 5.15.5 @mui/material-nextjs: ^5.15.3 => 5.15.5 @mui/private-theming: 5.15.5 @mui/styled-engine: 5.15.5 @mui/system: 5.15.5 @mui/types: 7.2.13 @mui/utils: 5.15.5 @mui/x-charts: ^6.18.7 => 6.19.1 @types/react: ^18 => 18.2.48 react: ^18 => 18.2.0 react-dom: ^18 => 18.2.0 typescript: ^5 => 5.3.3npx @mui/envinfo
Browser: Chrome Version 124.0.6367.61 (Official Build) (64-bit)
Search keywords: linechart, overflow
The text was updated successfully, but these errors were encountered: