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.11k stars 1.27k forks source link

[charts] Synchronizing Tooltips with Controlled Highlight #14455

Open hsellik opened 3 weeks ago

hsellik commented 3 weeks ago

Summary

Having a controlled highlight allows you to control it in multiple charts at the same time. However, the tooltip does not appear on the controlled highlight. It only appears on the chart that is hovered.

It would be nice if we could also show the tooltip in a controlled way.

Examples

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

Motivation

Instead of putting several lines together on one chart. In some scenarios, it would be more intuitive to put the data on separate charts, but show the tooltip at the same location for all the charts when they are hovered.

Search keywords: chart, controlled, tooltip, synchronized, highlight

alexfauquette commented 3 weeks ago

Thanks for the suggestion. Do you have a concrete example?

I struggle to see a dashboard with multiple tooltip moving at the same time. IMHO this kind of feature easily ends up in a chrimast tree effect where everything moves. But that's probably because I never faced a valid use case for it.

Two points to share context:

  1. The tooltip content and highlight are ma,aged separately, because you can highlight stuff that do not have tooltip. Best example is the series (line areas) which chan be highlight but have not data to be displayed (too many points)
  2. The current direction we are thinking about is instead of adding features to the tooltip (position, controls, ...) we want to provides hooks and components to simplify their creation. Such that you could creat your own logic with ease
hsellik commented 3 weeks ago

Thank you for the swift reply!

We are currently developing a dashboard for a physical device which has different metrics we want to observe, such as temperature, voltage (of different comopnents) and some other.

Putting all of them on the same line chart would mean having a difficult to follow Y axis.

Instead, we would like to use several line charts with shared time points, but different Y axis values. If the customer would move on one of the line charts, we would like the x axis line highlight and tooltip to appear on all the charts for the same shared time value.