koh_edwin
Posts: 24
Joined: Thu Aug 05, 2021 8:35 pm
Location: Toronto

determine the specific series during hover over

Hi,
we were asked to build a table in place of the tooltip for a line chart. the table includes series name, x-axis value + y-axis values. just to picture it:

--------------------------
Average for 2019
--------------------------
Male | 200
Female | 190
--------------------------

this will obviously be an HTML table with proper header background and other formatting. for this hypothetical scenario, we have two series' Male and Female; and the user is hovered over 2019. note that we dont show the tool tip per data point but for the whole x-axis value (2019) in this case

the behavior is such that when the user hovers over a data point, the corresponding series is highlighted, values for all the series is shown. the challenge rt now is to highlight the hovered over series in BOLD. we are using the following code to render the table:

Code: Select all

tooltip: {
        			formatter: function () {
						var thisTooltip=ChartData.TooltipTable[this.points[0].point.index].Header+
							ChartData.TooltipTable[this.points[0].point.index].Rows+
							ChartData.TooltipTable[this.points[0].point.index].Footer
						return thisTooltip
       				},
weve obviously predefined the table header, footer and rows for a specific x-axis value and just combine and return them and display as html. the tooltip is working so far. however, i cant find a reference to the currently hovered over series - i cant tell if the hover was on a male or female data point. ive looked at the possibility of using this.points.y to capture the data point's y-axis value but this component just returns the first y-axis value of all the series'

i can find that if i use the following:

Code: Select all

plotOptions: {
			series: {
				 point: {
                			events: {
                			    mouseOver: function() {
                			       	   console.log('POINT index',this.index)
so how do we find the same information while inside the tooltip formatter?

thanks,
edwin
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: determine the specific series during hover over

Hi,

Thanks for contacting us with your question!

You will find below two examples (the first one use a shared tooltip) showing how to achieve preferred formatting depending on chosen series.

Demo:
https://jsfiddle.net/BlackLabel/vfgt0268/
http://jsfiddle.net/BlackLabel/o78sg4qb/

If you will have a problem with implementing it in your project, please reproduce an example in an online editor that I could work on.

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
koh_edwin
Posts: 24
Joined: Thu Aug 05, 2021 8:35 pm
Location: Toronto

Re: determine the specific series during hover over

hi Magdalena
this is exactly what i need thank you very much
edwin
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: determine the specific series during hover over

You're welcome! In case of any further questions, feel free to contact us again.
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”