shadowbrij
Posts: 4
Joined: Fri Mar 13, 2020 3:04 pm

show band's to and from into tooltip

Image
https://ibb.co/DVhwZbX

PLEASE REFER TO THIS IMAGE.

Here I am using highstock.
The thing I want to achieve here is when I mouse over on bands I want to append a new line (maybe a <span>) to the tooltip that is already showing values for different series present there. FYI, I am using formatter function of tooltip to show that.

I am not able to find how xAxis.plotBands.events.mouseover:funtion(band){} must be implemented to get from and to of the band and show it to tooltip in a new line.
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: show band's to and from into tooltip

Hello,

Welcome to our forum and thanks for contacting us with your question!

You can find information about from and to on mouseover event over this.options property. To append it to the tooltip you could store it in the chart object (or in an external variable), and delete it on mouseout. Then you could use that property to add a new position in the tooltip depending if the information exists or not (because you are deleting it on mouseout, the information about those properties would be available only when you are hovering the plotband).
Live demo: https://jsfiddle.net/BlackLabel/c6p35zut/

Let me know if that was what you were looking for!

Kind regards.
Mateusz Kornecki
Highcharts Developer
shadowbrij
Posts: 4
Joined: Fri Mar 13, 2020 3:04 pm

Re: show band's to and from into tooltip

Though your solution work perfectly for Highcharts, a lot of the things you provided doesn't work with Highstock . Like , we can't write this.series inside formatter function of tooltip . Object this here only has x,y and points .

Today I came up with my own solution which is below :

I can access a particular band inside formatter like this -

var band = this.points[0].series.chart.xAxis[0].plotLinesAndBands.filter(p => p.options.from <= this.x && p.options.to >= this.x);

and then band[0].options.from and band[0].options.to
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: show band's to and from into tooltip

Thanks for sharing your solution, I am glad you figured it out!

It is possible to use formatter to achieve similar results in highstock, the only thing you need to change is the path for the chart and series objects.
Live demo: https://jsfiddle.net/BlackLabel/som54jtp/

Feel free to ask any further questions!

Regards.
Mateusz Kornecki
Highcharts Developer
shadowbrij
Posts: 4
Joined: Fri Mar 13, 2020 3:04 pm

Re: show band's to and from into tooltip

Thank you.
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: show band's to and from into tooltip

You're welcome! ;)
Mateusz Kornecki
Highcharts Developer
AbuSufyan
Posts: 54
Joined: Tue Jan 20, 2015 9:00 am

Re: show band's to and from into tooltip

Hi,
How we show plotBands Tooltip(in our case background alternate shading) when xAxis is Date? In our case our xAxis is Date and we handle mouseover and mouseout Events. These events are not working with date only worked when we assign numbers in from and to plotBands properties. Snapshot attached. Any help should be appreciated
Attachments
Screenshot_364.png
Screenshot_364.png (18.88 KiB) Viewed 644 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: show band's to and from into tooltip

Hello AbuSufyan!
Please, do not duplicate posts on our forum and wait for the reply on your first post with questions here: viewtopic.php?f=9&t=45482#p179806 That makes it much easier to track the whole issue in one topic (for us, and future users who might face a similar issue).

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”