How to show different tooltips for target and bar in Highcharts bullet graph?

I am implementing a bullet graph using Highcharts and need help with configuring tooltips.

My requirement is, When hovering over the target line: Show target-related details. When hovering over the bullet bar: Show revenue related details in my case. Currently, both the target and the bar show the same tooltip. I want them to display different information depending on where the user hovers.

This is what I followed: https://www.highcharts.com/demo/highcharts/bullet-graph

Here's the code sandbox link for the implementation that I have done: https://codepen.io/Bhagya-Krishna-the-selector/pen/gbOpLvM

Issue: The tooltip currently shows the same information for both the bar and the target. I want separate tooltips: Bar hover: Show Revenue data(e.g., Revenue: 275) Target hover: Show target details (e.g., Target: 250)

Any guidance or code samples would be greatly appreciated!

Continue reading...