Hey,
I'm trying to implement the feature around synchronization between chart and custom table.
The requirements are as follows.
1) when I change the value in the <input> inside the table, the corresponding point on chart would update the value accordingly, show marker in hover state, show the vertical crosshair and show tooltip for that updating point only. Also, since I might need to show many data points on the chart, I need to enable ScrollablePlotArea for scroll bar. Hence, if the updating point is not in the view, scroll it into the chart view.
2) when I hover on a <td> inside the table, the corresponding point on chart would show marker in hover state, show the vertical crosshair and show shared tooltip for all the points on the same vertical crosshair. To summarize, the tooltip, marker and crosshair should be looking pretty similar to when you directly hover on that point in chart. Also, since I might need to show many data points on the chart, I need to enable ScrollablePlotArea for scroll bar. Hence, if the hover point is not in the view, scroll it into the chart view.
I'm working on this demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx. For value updating, it's easy to realize with component state. But I would like to get some suggestion on the other requirements, like what API should I call, etc. Here are some problems in that demo.
1) When I hover on a <td> inside the table, the tooltip would show on the chart for a while and then disappear immediately. How to prevent it from disappearing before the mouse leaves the hover <td> in the table? And how to show the marker in hover state?
2) How to show the crosshair?
3) How to scroll the updating/hover point into the view?
Hope to get some help here. Thanks!