Custom line chart visual tooltip

[humppa123]

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:

1. 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?
2. How can I display a vertical bar at the current tool tip position just like in the built in visual?

Best regards

[dm-p · Accepted solution]

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