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.57k stars 1.34k forks source link

[charts] `ChartsTooltip` and `ChartsAxisHighlight` not re-render when update series data #15565

Open winey-dev opened 6 days ago

winey-dev commented 6 days ago

Steps to reproduce

example: codesendbox

Current behavior

  1. I'm using TSDB and I'm receiving an updated series dataset by setting the interval to 10 seconds.

  2. When the mouse pointer is on top of the chart, the ChartsTooltip and ChartsAxisHighlight are rendered on top of the chart.

  3. The problem occurs when the received data is rendered to Chart after 10 seconds. MarkPlot is currently displaying a good re-branding above the mouse pointer, but the ChartsTooltip and ChartsAxisHighlight are not re-branding.

Expected behavior

I believe that when the series data is updated, the ChartsTooltip and ChartsAxisHighlight information should also be re-rendered to reflect the current information, similar to MarkPlot.

Context

MarkPlot, ChartsTooltip, and ChartsAxisHighlight are components with similar characteristics but are heading in different directions, causing a lack of synchronization. I believe it would be beneficial to align these three components to ensure consistency.

Additionally, it would be ideal if users could choose the conditions under which re-rendering occurs within the same chart area. For example, one user might want to view continuous data through the tooltip, while another might prefer the tooltip's content to remain fixed.

Your environment

npx @mui/envinfo ``` System: OS: Windows 11 10.0.22631 Binaries: Node: 22.9.0 - C:\Program Files\nodejs\node.EXE npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (131.0.2903.51) npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: 5.0.0-beta.58 @mui/core-downloads-tracker: 6.1.1 @mui/icons-material: ^6.1.1 => 6.1.1 @mui/lab: ^6.0.0-beta.11 => 6.0.0-beta.11 @mui/material: ^6.1.1 => 6.1.1 @mui/private-theming: 6.1.1 @mui/styled-engine: 6.1.1 @mui/styles: ^6.1.1 => 6.1.1 @mui/system: ^6.1.1 => 6.1.1 @mui/types: 7.2.17 @mui/utils: 6.1.3 @mui/x-charts: ^7.22.1 => 7.22.1 @mui/x-charts-vendor: 7.20.0 @mui/x-internals: 7.20.0 @mui/x-tree-view: ^7.20.0 => 7.20.0 @types/react: 18.3.7 react: ^18 => 18.3.1 react-dom: ^18 => 18.3.1 typescript: 5.6.3 => 5.6.3 ```

Search keywords: ChartsTooltip,ChartsAxisHighlight

michelengelen commented 4 days ago

Hey @winey-dev Thanks for opening an issue! I'll add this to the board. 👍🏼

alexfauquette commented 4 days ago

I do not manage to get the reproduction working, but that sounds fairly similar to #15065

The root cause is the tooltip state being updated only by pointer event, so its blind to item updates