silestis
Posts: 32
Joined: Thu Mar 15, 2018 10:25 am

Tooltip changes it's position when one series data is updated.

Hi,

we have a small issue with Highcharts tooltip when series data are updated every two seconds.

When user moves mouse over the chart, tooltip is visible next to the cursor correctly - it's shared tooltip, so both series are included in the tooltip data. But after two seconds when one serie is updated with use of setData() method, first and sometime also second point happen.

1) Tooltip is moved from the cursor position to some "default" position near the axis.
2) Shared tooltip is showing only those trend data, which was not updated. The second trend data are missing completely. User has to move the cursor to see both series data inside tooltip again.

Have you ever seen this behavior? How can we fix that? Thanks a lot.

Best regards,
David
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Tooltip changes it's position when one series data is updated.

Hi David,

It's hard to say what's wrong without a look at your code.
Could you replicate the case in the online code editor so we can take a closer situation?

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
silestis
Posts: 32
Joined: Thu Mar 15, 2018 10:25 am

Re: Tooltip changes it's position when one series data is updated.

Here is the JSFiddle:
https://jsfiddle.net/ybg2pu1r/

If you move your mouse over a gantt item, it will show you the tooltip on the cursor position - that is correct, that is what we want. But if you wait a little bit and gantt data items are updated (every 3 seconds), tooltip will be moved to the center of the item or somewhere else.

How can we achieve to make that tooltip on the cursor position all the time, regardless of data changing.

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

Re: Tooltip changes it's position when one series data is updated.

Hi,
Thanks for the detailed information.

Try to update the data in a different way when I update the data according to the chart.update.
The problem with changing the tooltip position doesn't appear.

Demo:
https://jsfiddle.net/BlackLabel/yrw9s7bc/

References:
https://api.highcharts.com/class-refere ... art#update

Let me know if that was what you were looking for!
Best regards.
Sebastian Hajdus
Highcharts Developer
silestis
Posts: 32
Joined: Thu Mar 15, 2018 10:25 am

Re: Tooltip changes it's position when one series data is updated.

Hi and thanks for reply.

Unfortunately it is not what we are looking for. I adjusted your code a little bit so it updates data exactly the same way, but every 3 seconds inside setInterval().

https://jsfiddle.net/p6xsa4Ly/

So when you move your cursor over the gantt item, it shows a tooltip next to the cursor. But when setInterval function is fired, tooltip suddenly changes its position. We want that tooltip be always next to the cursor even when data are updated.

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

Re: Tooltip changes it's position when one series data is updated.

Hi,

This happens when loading data asynchronously, I tried by setTimeout() and it doesn't have this problem.
But I suspect in your case you want to load data asynchronously, so that's not enough, I'm right?.

I think the point is that every time you enter new data, the graph is redrawn.
Maybe you will try to do something similar to this example?
https://jsfiddle.net/gh/get/library/pur ... mic-update

You can also try adding a series using the addSeries class.
https://jsfiddle.net/BlackLabel/7mo1yz0c/
https://api.highcharts.com/class-refere ... #addSeries

Let me know how are you doing with this.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”