annananana
Posts: 34
Joined: Wed Feb 03, 2021 11:27 pm

Synchronization between chart and custom table

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!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronization between chart and custom table

Hi,
Thanks for contacting us again!

Your task is quite complex and time-consuming to complete, here are sent you some useful tips.

1. Let's start by showing the tooltip after hovering over a point in the table and showing the marker.
This article describing how to communicate between the table and the chart.
https://www.highcharts.com/blog/tutoria ... and-table/

2. To draw lines after clicking, you can try to do it this way.
Use plotLine, add it to event events.mouseOut and remove it from events.mouseOver.

https://api.highcharts.com/highcharts/p ... s.mouseOut
https://api.highcharts.com/highcharts/p ... .mouseOver

https://api.highcharts.com/highcharts/xAxis.plotLines
https://api.highcharts.com/class-refere ... ddPlotLine
https://api.highcharts.com/class-refere ... vePlotLine

3. Please explain where you want to add a scroll, what view do you want to scroll?

Let me know how are you doing with this.
Best regards.
Sebastian Hajdus
Highcharts Developer
annananana
Posts: 34
Joined: Wed Feb 03, 2021 11:27 pm

Re: Synchronization between chart and custom table

Hi,

Thanks for reply. To solve the problem step by step, let's focus on the scrolling first since I assume this is the most complicated part in the requirements.

Use this demo as an example: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx. The points on chart and points on table are mapping with each other. Because I enable ScrollablePlotArea, when minWidth is larger than the width of chart's container, some of the points will be in the shading area. What I want is when I edit an input on table, its corresponding point on chart should be scrolled into the view of chart's container if it's in the shading area.

For example, in the demo, initially, point with value '6' on 'new-data' series should be inside the shading area (if you drag to make the chart's container less than minWidth). But when I change its value in the table, I want to have some approach to scroll that point out of the shading area so that I can see it on chart directly when I'm editing that point. No matter where it scrolls to, as long as I can see that point in the view of chart's container, it should be fine.

Let me know if the explanation is not clear.

Thanks!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronization between chart and custom table

Hi,
Thanks for the detailed information, I have some questions for you.

You have horizontal scrooll and want to synchronize scroll with points in the table.
When you click point (with value '6' on 'new-data' series) for example.
You want to track it and move scroll position if point it's invisible, yes?

For this behavior you need to connect chart.scrollablePlotArea.scrollPositionX with the position of a point on the xAxis and number in the table in your case.

This topic looks describing something similar issue, but you need to code your own implementation.
viewtopic.php?f=9&t=41784

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”