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

[alexbalonperin]

@oliviertassinari Sorry for some reason I didn't get a notification about your message. I actually can't find the video in my drive either. Should I make a new one?

[alexfauquette]

@alexbalonperin The issue is fixed but only in v8. You can go on https://next.mui.com/x/react-charts/tooltip/

The before (v7) /after (v8) of playing with the first demo

We've been too generous with the slotProps.axisContent. It was providing x/y information about the mouse position. So each time you move the mouse the Tooltip needs to rerender.

In v8 the tooltip will only access the data from the axis that triggers it. SUch that as long as the mouse stays in the same x-value, the tooltip moves but does not re-render.

[alexbalonperin]

Awesome! Thank you for the fix and the update! I knew I was making the right choice switching to mui/x-charts. You guys are doing an amazing job. 👏

Do you have any plan to port the fix to v7?
I would like to migrate to v8 but since it's not going to be stable until March 2025 (as per the related blog post), I am not sure about using it in production for now. 🤔

[alexfauquette]

The issue is that providing x/y axis to the slots is part of the public API. So we can't bring that back to the v7 without being a breaking change.

[alexbalonperin]

I see. That makes sense. I'll keep an eye on v8. Maybe we can upgrade before it's fully stable.
Thank you again for your quick response.

[oliviertassinari]

switching to mui/x-charts.

@alexbalonperin what were you using before? Thanks for giving this a try.

[alexfauquette]

I'm closing since the root cause of the issue got fixed in the v8

[github-actions]

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.

Note

@alexbalonperin 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.

[oliviertassinari]

Right, yeah #15003 fixes the CPU issue.

Before

https://mui.com/x/react-charts/lines/#data-format

After

https://next.mui.com/x/react-charts/lines/#data-format

[oliviertassinari]

Oh interesting, we also have a case (a lot less frequent than the case in this issue) of this problem with the tooltip behind being super slow. This time the problem is with the GPU: #16658.