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

Keep tooltip visible when dragging xrange.

Tue Jan 25, 2022 9:12 pm

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 344 times

magdalena
Posts: 516
Joined: Tue Aug 24, 2021 1:32 pm

Re: Keep tooltip visible when dragging xrange.

Wed Jan 26, 2022 1:13 pm

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
Highcharts support engineer

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

Re: Keep tooltip visible when dragging xrange.

Wed Jan 26, 2022 2:05 pm

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 321 times

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

Re: Keep tooltip visible when dragging xrange.

Wed Jan 26, 2022 7:09 pm

Not working using together Scatter.

magdalena
Posts: 516
Joined: Tue Aug 24, 2021 1:32 pm

Re: Keep tooltip visible when dragging xrange.

Thu Jan 27, 2022 6:17 pm

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
Highcharts support engineer

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

Re: Keep tooltip visible when dragging xrange.

Thu Jan 27, 2022 9:03 pm

Thanks so much magdalena.

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

Can improve this? or this is fine?

Thanks a lot!

magdalena
Posts: 516
Joined: Tue Aug 24, 2021 1:32 pm

Re: Keep tooltip visible when dragging xrange.

Mon Jan 31, 2022 2:37 pm

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
Highcharts support engineer

Return to “Highcharts Usage”