Big data chart – custom tooltip issue

[lxREAPERxl]

Hello,

Curently, we have several charts already working in the application, but latest request from client started causing a bit of a problem, let me explain using demo JSFiddle.:

Demo chart

This is the chart (well, its denerated demo, but its as close to the original as you can get). Basicaly, there are three line series, which contain massive data load (usualy between 10k-25k datapoints). The latest request I have mentioned, is about the blue dots you can see hovering over X axis.

Normaly, line series have shared custom tooltip, which works like a charm. However, the dots require another custom tooltip.

Problem here is, that eventhough my cursor seems to be targeting the dot (scatter serie), the other tooltip is displayed. Only when there are no data around, or if you zoom deep enough, the tooltip for the dot is displayed. Our client however requests, that the ,,dot” tooltip should have higher priority, so it should be displayed everytime you hover over it. I was attempting to find some solution using Z index and move the serie above others, but I had no luck so far. Do you have any suggestions? (I hope that the description is adequate).

To put it simply:
Serie0 – line serie, shared
Serie1 – line serie, shared
Serie2 – line serie, shared
Serie0 – Serie2 – shared customized tooltip

Serie3 – scatter, not shared, custom tooltip

I hope you can provide some insight as to how to avoid this issue.
Thank you for your time.

[Indranil]

@lxreaperxl,

Thanks for sharing the use-case. We are looking into it get back to you at the earliest.

___________
Indranil Deo
Team CanvasJS

[lxREAPERxl]

Hello, its not necessary :) I have solved the issue already. It seems, that there is a problem, when you have multiple series with SHARED tooltip, and then something else, that doesnt share tooltip (basicaly, the shared tooltip event seems to ignore any other serie if ,,visualy” they seem to be in the same range).

Simple solution to this was to disable tooltip sharing and inside the tooltip render method, just get the data by hand, which is quite simple, since hover event returns index value, among other stuff.

Anyway, thanks for your time. I hope that my response will be helpful to you for any future reference regarding this topic.