dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Tooltip positioning for mult-pane charts and showing last value

Hi,
if you have a look at this fiddle: https://jsfiddle.net/dizzy0ny/3ukcexvh/184/

you will see i have 3 series drawn, on two 'panes'. When you hover over the chart, the tool tip is anchored to the upper left.
chart1.png
chart1.png (108.74 KiB) Viewed 428 times
I would like to make a few modifications to this behavior:
1. When my mouse is not over a chart point, i would like that tooltip/label to still be visible, but show the last values in the series.
2. Id prefer if series 2 anchored to the top left of the pane it is located in.
3. and lastly, is it possible to add a line to the tooltip. for example i would like to add a 'chg' value which is the different between the current bar's close and the previous bars close value. this would only be needed for ohlc/candlestick type series. (i could calculate this in js or pass that data as an additional array element)

any guidance or examples for how to accomplish this would be appreciated.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Tooltip positioning for mult-pane charts and showing last value

Hello dizzy!
Thanks for contacting us with your question!

1) I think the easiest way to stop disappearing tooltip when moving the mouse out of the chart will be to disable the method responsible for hiding the tooltip using these lines:

Code: Select all

Highcharts.Pointer.prototype.reset = function () {
      return undefined;
};
Demo: https://jsfiddle.net/BlackLabel/p73kshvm/

2) I am not quite sure what you want to achieve, can you describe it more precisely? The best option would be some graphics, what look to want to achieve.

3) To add some custom information to the tooltip you can use a tooltip.formatter property, described here: https://api.highcharts.com/highcharts/tooltip.formatter
Sadly, you will have to build a full tooltip description from basics, because formatter is disabling the default tooltip look. You will have to make some dots with proper colour and labels with data from the hovered point.

Regards!
Hubert Kozik
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: Tooltip positioning for mult-pane charts and showing last value

Thanks Hubert.
#1 the solution presented does work to stop the tooltip from disappearing. but i am wondering is it possible for me to add my own handler so i can populate it with the last value in the series before the mouse moves off the chart, and possibly also to show the tooltip when the chart is rendered from the get go?

#3 thank you - will try this solution. Fine with customizing this myself.

#2 you asked for clarification. basically the tooltip for series 2 is currently grouped at the upper left with all the rest of the tooltip values. instead i would prefer if it were in the upper left relative to the series locations where it is drawn (i refer to that as the 2nd 'pane' in the chart). attached is an image showing the desired outcome:
chart1.png
chart1.png (38.57 KiB) Viewed 407 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Tooltip positioning for mult-pane charts and showing last value

dizzy,
Sorry for the late reply, but implementing features like you requested took me a while. First, I will describe the second point, to do this, first you have to disable this series from showing in the shared tooltip. Sadly, there is no option to do this directly from API. I did it with a trick, to return false on this specific series.pointFormatter callback function. Then, in tooltip.formatter there is a logic to render a custom label in the correct place, which will look the same as the default tooltip and after that, by using line return tooltip.defaultFormatter.call(this, tooltip);.

To show the last values when your mouse leaves the chart, I added logic to Highcharts.Pointer.prototype.reset function. Please, check everything in the demo below.

Demo: https://jsfiddle.net/BlackLabel/wqtnchm7/
API Reference: https://api.highcharts.com/class-refere ... VGRenderer
https://api.highcharts.com/class-refere ... ip#refresh

Best regards!
Hubert Kozik
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: Tooltip positioning for mult-pane charts and showing last value

Thankyou. i a really appreciate you being able to find a solution! works nicely.
Perhaps we can add this to a feature request to make it a bit easier down the road.

Thanks again!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Tooltip positioning for mult-pane charts and showing last value

You're welcome! If you would to see a feature like that implemented, feel free to create a feature request here: https://github.com/highcharts/highchart ... new/choose
With enough users' votes, we will gladly implement something like this.

In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”