Luizgpp
Posts: 4
Joined: Tue Jan 25, 2022 8:40 pm

Keep tooltip visible when dragging xrange.

Hello guys.

I'm trying to keep tooltip visible when dragging xrange to display xAxis datetime.

When the mouse left from xrange on drag the tooltip disapear.


Works only on move event (mouse always in the xrange).

https://jsfiddle.net/4xjkrh35/

I need some fixed info of my xAxis datetime.

Can help me please?
Attachments
Recording 2022-01-25 at 18.11.21.gif
Recording 2022-01-25 at 18.11.21.gif (193.8 KiB) Viewed 468 times
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Keep tooltip visible when dragging xrange.

Hello Luizgpp,

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

You can try to add tooltip via point.mouseOver(). Check the following demo and let me know if that was what you were looking for.

Demo:
https://jsfiddle.net/BlackLabel/236dbyp4/

API Reference:
https://api.highcharts.com/highcharts/p ... .mouseOver

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
Luizgpp
Posts: 4
Joined: Tue Jan 25, 2022 8:40 pm

Re: Keep tooltip visible when dragging xrange.

Hello magdalena,

thanks for the reply.

With scatter together not working properly.

https://jsfiddle.net/c5fqtLs9/1/


If possible, can create a guideline when drag (or just a static box) like image? To display xRange values?
Attachments
Captura de tela de 2022-01-26 10-57-13.png
Captura de tela de 2022-01-26 10-57-13.png (13.54 KiB) Viewed 445 times
Luizgpp
Posts: 4
Joined: Tue Jan 25, 2022 8:40 pm

Re: Keep tooltip visible when dragging xrange.

Not working using together Scatter.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Keep tooltip visible when dragging xrange.

Hi,

Yes, it is possible. You can for example use adataLabel with the custom text inside.

Demo:
https://jsfiddle.net/BlackLabel/kto6jwgz/

API Reference:
https://api.highcharts.com/highcharts/p ... dataLabels

You can also use Highcharts. SVGRenderer to draw a line or label, but the implementation of the label showing depending on the dragging side could be more complicated.

API Reference:
https://api.highcharts.com/class-refere ... VGRenderer

Let me know if you have any further questions,
Regards
Magdalena Gut
Developer and Highcharts Support Engineer
Luizgpp
Posts: 4
Joined: Tue Jan 25, 2022 8:40 pm

Re: Keep tooltip visible when dragging xrange.

Thanks so much magdalena.

I made this: https://jsfiddle.net/75hst2k3/1/

Can improve this? or this is fine?

Thanks a lot!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Keep tooltip visible when dragging xrange.

Hello Luizgpp,

Yes, the implementation is fine! If you want to have this label exactly in this place, I would only change the hard-coded pixels to chart.plotLeft.

Demo:
https://jsfiddle.net/BlackLabel/grndfqyo/

Of course, you can refine it according to your needs. Here is an example idea: https://jsfiddle.net/BlackLabel/0t1zLsg4/

​If you have further inquiries, you may reach out to me at any time,
Regards
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”