[charts][Linechart] Horizontal overflow on mobile

[melnikovic]

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

    <div style={{ height: 500 }}>
      <h1>Hello {name}!</h1>
      <p>Start editing to see some magic happen :)</p>
      <LineChart
        xAxis={[
          {
            data: [
              new Date(2022, 1, 1),
              new Date(2022, 2, 1),
              new Date(2022, 3, 1),
              new Date(2023, 1, 1),
              new Date(2023, 4, 1),
              new Date(2024, 1, 1),
              new Date(2024, 2, 1),
              new Date(2024, 3, 1),
            ],
            scaleType: 'time',
          },
        ]}
        series={[
          {
            id: 'checkpoints',
            data: [0, 10000, 20000, 30000, 40000, 50000, 60000, 70000],
            label: 'Here is my long label',
            area: true,
            color: '#7000FF',
          },
        ]}
      ></LineChart>
    </div>

Your environment

npx @mui/envinfo

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.3

Browser: Chrome Version 124.0.6367.61 (Official Build) (64-bit)

Search keywords: linechart, overflow

[alexfauquette]

I'm not sure we can have make it resize when overflowing the screen, bu maybe we could let it move under the mouse.

You can already modify some of the settings with slots.popper

[melnikovic]

Hi @alexfauquette thank you for your response. Can you be more specific how could I use slots.proper to fix my issue?

[alexfauquette]

@melnikovic You can find more information in this issue #11484

The codesandbox shows how to override the popper component. And the discussion in the issue is about how to use the slotProps.

Don't hesitate to add comment if something is unclear such that we could improve the docs later :)

[github-actions[bot]]

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