Custom line chart visual tooltip

humppa123 — Tue, 22 Sep 2020 13:26:28 GMT

Hi all,

I've succesfully created a custom line chart visual. Now I want it to have the same tooltip functionality as the default line chart. But I've ran into two issues:

The tooltip returns the whole series in the getTooltipData() method. How can I query for a single datapoint in the addTooltip() when using a line generator and a path?
How can I display a vertical bar at the current tool tip position just like in the built in visual?

Best regards

Re: Custom line chart visual tooltip

dm-p — Tue, 22 Sep 2020 21:11:28 GMT

Hi @humppa123,

For a line (and presuming your data points are bound to the individual points in your line function), you need to resolve the mouse position and work out the nearest data point to supply to the tooltip handler.

For the vertical line, you need to draw it in the DOM, spanning the entirety of the value axis and keep it hidden until you resolve the point above. When you have this, you move the line to the resolved data point's position and then show it. You might want a similar approach for any series in your visual (in mine I've done this with a circle and move this to the same horizontal position as my line when using the mouse).

I've done something similar to the core line chart in one of my visuals - if you start with bindTooltipEvents(), you can follow the code to the other function calls. The most relevant is getHighlightedDataPoints() , which handles the resolution of data points, depending on whether you're using a linear or categorical axis.

Hopefully this should help you get started. Good luck!

Daniel

topic Re: Custom line chart visual tooltip in Developer

Custom line chart visual tooltip

Re: Custom line chart visual tooltip