Jaws
Posts: 10
Joined: Wed May 25, 2022 6:31 am

Select entire row on clicking on individual series

Wed Sep 21, 2022 12:45 pm

The goal is to select series and highlight the entire row.

https://jsfiddle.net/v9npkez6/

hubert.k
Posts: 929
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

Wed Sep 21, 2022 12:50 pm

Hi Jaws!
It seems, that I have answered the same question on the topic before you, here: viewtopic.php?f=19&t=49508

If you have any further questions feel free to ask.
Regards!
Hubert Kozik
Highcharts Developer

sachin.b-s
Posts: 8
Joined: Mon Aug 08, 2022 9:03 am

Re: Select entire row on clicking on individual series

Thu Sep 22, 2022 5:52 am

we wanted to highlight the row on click of series not y-axis

hubert.k
Posts: 929
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

Thu Sep 22, 2022 6:14 am

I am not sure what do you mean by click series. In your demo, you have data with two series, which have 8 and 6 points. Do you want to click on any point from the series and highlight all rows from that series (which means that 8 or 6 rows will be highlighted)? Or do you want to click on one specific point and highlight the row of that one specific point?

Waiting for your response.
Hubert Kozik
Highcharts Developer

Jaws
Posts: 10
Joined: Wed May 25, 2022 6:31 am

Re: Select entire row on clicking on individual series

Thu Sep 22, 2022 10:12 am

Sorry if I wasn't clear,

In the link that you had provided viewtopic.php?f=19&t=49508, here it works fine if I click on Y-Axis item, awesome that was one of the requirement. Also I want to highlight the entire row if I click on an X-Axis item as well (Series Variable). If I click on the 20% or any other X-Axis item I need the row to get highlighted like the one in link

Also if you notice if I click on one Y-axis item it gets high lighted but I have to double click on another item to highlight it. Can this double click prevented?

sachin.b-s
Posts: 8
Joined: Mon Aug 08, 2022 9:03 am

Re: Select entire row on clicking on individual series

Thu Sep 22, 2022 11:39 am

click one point from the series and highlight that row

hubert.k
Posts: 929
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

Fri Sep 23, 2022 7:20 am

Hi there,
Here is a functionality you would like to see. It is based on the same logic and little changes in code as I have already sent to you in previous posts.

Demo: https://jsfiddle.net/BlackLabel/910nou7s/
API Reference: https://api.highcharts.com/gantt/series ... ents.click

Regards!
Hubert Kozik
Highcharts Developer

sachin.b-s
Posts: 8
Joined: Mon Aug 08, 2022 9:03 am

Re: Select entire row on clicking on individual series

Fri Sep 23, 2022 12:24 pm

Cool :D by adding both solution selecting y-axis and point highlights the row. But when there are multiple y-axis category in the chart it highlights only last category only while selecting both point and y-axis


https://jsfiddle.net/9871mspd/9/

hubert.k
Posts: 929
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

Fri Sep 23, 2022 12:38 pm

sachin.b-s,

Yes, that's a custom solution, so sometimes it could need some adjustment, like in your case. The improved version in the demo below.

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

Regards!
Hubert Kozik
Highcharts Developer

sachin.b-s
Posts: 8
Joined: Mon Aug 08, 2022 9:03 am

Re: Select entire row on clicking on individual series

Fri Sep 23, 2022 6:53 pm

hi there,
But still the first 3 category doesn't highlight the row. Did we miss anything in render() within the chart option ?

hubert.k
Posts: 929
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

Mon Sep 26, 2022 10:38 am

sachin.b-s, Jaws,

I am sorry for misunderstanding your previous post. I have added more custom JS code to the demo to add click events listeners to all labels.

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

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Gantt”