As if right now, I have create a custom annotation, which is a red circle and the idea is to show some info when hovering on it, like a tooltip.
Right now, when hovering on the red circle, I am adding another custom annotation to show the info and then removing it when not hovering anymore. The issue with this is that it is not very stable, as in if I don’t point my cursor right in the middle of the red circle, it won’t register as hit. I tried putting hitTestRadius to 50 on CursorModifier, but doesn’t seem to make any difference.
I have also try with xyScatterRenderableSeries and EllipsePointMarker, the issue I find with it is that it is interfering with my data series tooltip, as the cursor modifier recognize it as a chart series and try to show on the tooltip, which I don’t want. I only want the red circle to be trigger only when cursor is right on it.
The first image is my code and how I am trying to achieve it at the moment, it does work, but I don’t think it’s very stable, I wish there is a more natural way to do it.
The second image is how my current solution looks like, as you can see, the data series tooltip is overlapping it, which I want to avoid. I can’t think of a way to solve the overlapping issue yet. Other than unstableness and the tooltip overlapping, it work fine.
The third image is how I want it to look like.
- Nung Khual asked 7 months ago
- You must login to post comments
Hi
Firstly, when you are doing any kind of mouse interaction with SciChart, it is best to create a custom chartModifier and override the relevant mouse event method, rather than adding additional subscriptions to the html mouse event. SciChart maintains all these subscriptions internally and calls the relevant methods on all attached modifiers, which means everything gets cleaned up properly on delete.
For an example of a custom modifier which does a hover check on annotations, look here
Having said that, I would have expected your code to work. The fact that it is requiring a very precise mouse position suggests that something is not working as expected within checkIsClickedOnAnnotation, possibly the calculation of the borders of the annotation you are hovering over. A codepen or codesandbox that replicates this issue would really help.
Doing this with a XyScatterRenderableSeries is actually a very good alternative if you have a large number of target annotations. I think all you need to make this work is to make use of the includedSeries functionality on CursorModifier. Exclude the scatter series from your main CursorModifier and add another CursorModifier with a custom svgTemplate for the tooltip, with only the scatter series included.
Our main hesitancy with annotation onHover is it is a potential performance problem if people add large numbers of annotations. We do intend to provide some better guidance and/or built in features to support this.
Regards
David
- David Burleigh answered 7 months ago
- You must login to post comments
Please login first to submit.
