Tr335
Posts: 27
Joined: Tue Jun 28, 2022 9:31 am

Customize tooltip for plotline

How do I customize plotline tooltip.
Please find my link with tooltip for plotline: https://jsfiddle.net/e036q9xf/

I could see that tooltip formatter can be used as shown in this fiddle.: https://jsfiddle.net/jxytbkd4/ .Not sure how I could incorporate this for plotline. Thank you.

For example, I would like my tooltip to show as below:
PlotLineName
Series: seriesno
X-axis value: value
RandomDataFromJson: data
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Customize tooltip for plotline

Hi there!

You can format your tooltip in the tooltip.formatter callback function, which is fired whenever a tooltip is shown on a chart (even a custom one).

In this function, I have created a conditional return, which creates special formatting for the plotLine tooltip (when a custom plotLine property called "customTooltip" is set to true), otherwise, the original tooltip formatter is called.

Take a look at the demo below:
https://jsfiddle.net/BlackLabel/3k216ywa/

Let me know if that's what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer
Tr335
Posts: 27
Joined: Tue Jun 28, 2022 9:31 am

Re: Customize tooltip for plotline

Exactly what I was looking for. Thank you!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Customize tooltip for plotline

You're welcome! I'm glad that I could help you.

Have a nice day!
Kamil Musiałowski
Highcharts Developer
pradhumn_sharma
Posts: 1
Joined: Mon Jan 22, 2024 6:01 am

Re: Customize tooltip for plotline

Hello,

https://jsfiddle.net/BlackLabel/3k216ywa/

Above example of creating custom tooltip for plotline is not working because now we are getting "this.axis" as undefined in mouseover function in plotlines array due to which we are not able to access series and other details.

Note: This issue start happening after updating Highcharts from version 11.2.0 to 11.3.0

Please look into this and update soon as our major chart is breaking due to this issue.

Thanks
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Customize tooltip for plotline

Hey!

Due to some changes in v11.3.0, I had to change some parts of the mouseover code, now everything works as expected.

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

If any glitches arise please inform as soon as possible.
Kind regards
Jakub

Return to “Highcharts Usage”