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

[winey-dev]

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]

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

[alexfauquette]

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