[charts] CPU spike when hovering on the chart

[alexbalonperin]

Steps to reproduce

Link to live example: (required) https://drive.google.com/file/d/19hOtxsfqvliGRWg99a7IkYPql6RejmMc/view?usp=drive_link

https://mui.com/x/react-charts/lines/

https://recharts.org/en-US/examples

I have htop opened on the left side. The top process (chrome tab) can be ignored as it's the meet video call with recording that I used to create the above video. The interesting process is the second row (highlighted). You can follow the CPU spikes as I hover on the respective charts. Now, this is not a very rigorous way to test performance but since the difference is quite obvious I thought it would be acceptable to share it without spending a lot of time making the test more accurate.

Steps:

1. Display any line chart or bar chart on a page (with tooltip enabled)
2. Hover on the chart continuously with your mouse to make the tooltip appear at different ticks
3. Use a tool to monitor CPU usage such as top or htop.
4. You should notice significant CPU spikes as you hover on the chart. The spike disappears as soon as you stop hovering.

I assume that this has to do with the code rending the tooltip or the mark but I haven't tried to disable these yet.
Recharts has a similar behaviour but doesn't spike as dramatically as MUI X-charts. I also tried with Chart.JS but since they use canvas I thought it might not be as fair/useful a comparison.

Hopefully, this is helpful. If not, feel free to close.
Thank you for your time.

Current behavior

When hovering continuously on charts, CPU usage stays unexpectedly high.

Expected behavior

CPU should stay relatively stable when showing the same chart with the same tooltips.

Context

We create dashboard pages with many charts on it so it's very common for people to be hovering on charts continuously even without wanting to do so. When hovering continuously on line charts and bar charts (maybe other types of charts too), I noticed that my laptop fan was going at full speed. Looking at htop, I found out that the chrome tab with the mui/x-charts was using close to 100% CPU. I compared the same behavior with Recharts charts and the CPU was never above 50%. Since our users don't necessarily have very powerful machines, this CPU usage might make the application unresponsive frequently.

Your environment

The following is the summary of my system but this seems to be happening on the MUI X-charts documentation page too so I don't think the issue is specific to my system.

npx @mui/envinfo

$ npx @mui/envinfo
System:
OS: Linux 6.9 Pop!_OS 22.04 LTS
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
pnpm: 9.1.4 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
Browsers:
Chrome: 129.0.6668.58
npmPackages:
@mui/core-downloads-tracker: 6.1.0
@mui/icons-material: 6.1.0 => 6.1.0
@mui/material: 6.1.0 => 6.1.0
@mui/private-theming: 6.1.0
@mui/styled-engine: 6.1.0
@mui/styled-engine-sc: ^6.1.0 => 6.1.0
@mui/styles: ^6.1.0 => 6.1.0
@mui/system: 6.1.0
@mui/types: 7.2.16
@mui/utils: 5.16.6
@mui/x-charts: ^7.18.0 => 7.18.0
@mui/x-charts-vendor: 7.18.0
@mui/x-date-pickers: ^7.16.0 => 7.16.0
@mui/x-internals: 7.16.0
@mui/x-tree-view: ^7.16.0 => 7.16.0
@types/react: 18.0.26 => 18.0.26
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
styled-components: ^6.1.13 => 6.1.13
typescript: ^4.9.5 => 4.9.5

Search keywords: charts CPU

[alexfauquette]

Thanks for reporting it. That might be related to this issue #13450

I thaught it was limited to some charts, but if CPU usage increase for all of them. Then we should have a deeper investigation

[alexbalonperin]

It's definitely happening for Line Charts and Bar Charts. I haven't tested other types but if it helps, I can check.

[oliviertassinari]

@alexbalonperin Your initial video is no longer available, but I have added a screenshot of the Chrome performance timeline. It's indeed broken.