Tooltip positioning for mult-pane charts and showing last value

[dizzy]

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 (108.74 KiB) Viewed 934 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]

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!

[dizzy]

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 (38.57 KiB) Viewed 913 times

[hubert.k]

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!

[dizzy]

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]

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.

[dizzy]

While here - thought id check into see if this is supported natively yet. We created quite a custom formatter to be able to pin the tool tip to the upper left of each pane and also adjust its positioning if the pane is resized to keep it pinned. Is this something that is now supported natively now? just curious...

[andrzej.b]

Hi,

As far as I can tell it's still achievable via tooltip.positioner API, please see a demo: https://jsfiddle.net/BlackLabel/kpb1ndvu/

Feel free to reach out if you have any further questions.

Kind regards,

[dizzy]

Hi,

As far as I can tell it's still achievable via tooltip.positioner API, please see a demo: https://jsfiddle.net/BlackLabel/kpb1ndvu/

Feel free to reach out if you have any further questions.

Kind regards,

ok..thanks. that along with custom formatters is what we used - but it was alot of code for what i feel is a a pretty standard thing for most financial/stock charts out there. would be good to support it natively for your StockChart

[andrzej.b]

Thanks for sharing, again I can only invite you to raise a feature request here: https://github.com/highcharts/highchart ... new/choose

Kind regards,

[dizzy]

i did. i did a year or two ago i believe.