Deinko
Posts: 16
Joined: Tue Nov 29, 2022 12:53 pm

Flags tooltip from other series data

Hi!

Is it possible to show other series values on flag tooltip?
It should be the same content as the series shared tooltip.
photo_2022-12-19 10.08.28.jpeg
photo_2022-12-19 10.08.28.jpeg (162.94 KiB) Viewed 793 times
photo_2022-12-19 10.08.26.jpeg
photo_2022-12-19 10.08.26.jpeg (144.31 KiB) Viewed 793 times
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Flags tooltip from other series data

Hi,

Thanks for the question!

Sure, you can change the tooltip’s content through the series.tooltip.pointFormatter property. Inside this method you have access to the series data through function context (this keyword).

API Reference:
- https://api.highcharts.com/highstock/se ... tFormatter

You can see the simple demo here: https://jsfiddle.net/jakubSzuminski/a0mzjgtx/

Does that answer your question?

Best regards,
Jakub
Jakub
Highcharts Developer
Deinko
Posts: 16
Joined: Tue Nov 29, 2022 12:53 pm

Re: Flags tooltip from other series data

That's what I looked for! Thank you.

Additional question: Is it possible to draw color dots like in the built-in tooltip using pointFormatter? It's not working with <div style="background-color: ..."/>
Deinko
Posts: 16
Joined: Tue Nov 29, 2022 12:53 pm

Re: Flags tooltip from other series data

And also: I'm trying to show tooltip for flags series programmatically. But the issue is that it shows only for a second and disappears:

Code: Select all

 
            chartRef?.current?.chart.series[0].points[0]?.onMouseOver()
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Flags tooltip from other series data

Hi,

Thanks for the questions.

1. It is possible to draw color dots like in the built-in tooltip using pointFormatter. You simply use the special circle character and add the <p> tag with color set to series.color

2. You can increase the tooltip.hideDelay to a higher number (by default it's 500). For example, if you set it to 9000, the tooltip will be visible for 9 seconds after you call the chartRef?.current?.chart.series[0].points[0]?.onMouseOver() event (unless you hover over other tooltip).

Demo: https://jsfiddle.net/BlackLabel/avgbjsL9/
API Reference:
- https://api.highcharts.com/highcharts/tooltip.hideDelay

Does that answer your question?

Best regards,
Jakub
Jakub
Highcharts Developer
Deinko
Posts: 16
Joined: Tue Nov 29, 2022 12:53 pm

Re: Flags tooltip from other series data

Can you please show me how to hide tooltip programmatically same way? onMouseOut is not working.
I need to show tooltip on hover an element outside the chart.
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Flags tooltip from other series data

Hi,

You can do this with chart.tooltip.hide method.

API: https://api.highcharts.com/class-refere ... oltip#hide
Demo: https://jsfiddle.net/BlackLabel/2wLy17hj/

Let me know if everything works as you intended.

Regards,
Jakub
Jakub
Highcharts Developer
Deinko
Posts: 16
Joined: Tue Nov 29, 2022 12:53 pm

Re: Flags tooltip from other series data

That works! Thank you!

I also have one more question: Is it possible to show flag tooltip and keep it this way regardless of hover even on chart?

The scenario that I trying to implement:
You can hover on notes in notes list (outside the chart) and tooltips should show on hover, but if you click on a note, the tooltip should be visible until you click somewhere else, even if you hover other notes or chart.
Deinko
Posts: 16
Joined: Tue Nov 29, 2022 12:53 pm

Re: Flags tooltip from other series data

So I'm able to show tooltip with .refresh(point), and hide it with .hide(0)

But the question is: how can I show tooltip, and prevent changing tooltip position and data on chart hover while initial tooltip is displayed? And after clicking on the button again - return to the default behaviour
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Flags tooltip from other series data

Hi,

Thanks for the question.

Each tooltip is an object of class Highcharts.Tooltip. By default, a Highcharts.chart has only one tooltip, but you can create multiple ones and assign them to specific points with Highcharts.Tooltip.refresh. This way you can have multiple tooltips visible at the same time in the chart.

Here's the demo of a scenario you described: https://jsfiddle.net/BlackLabel/2w14ckbr/

API: https://api.highcharts.com/class-refere ... ts.Tooltip

Let me know if any more questions arise.

Best regards,
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Stock”