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

Select entire row on clicking on individual series

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

https://jsfiddle.net/v9npkez6/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

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: 14
Joined: Mon Aug 08, 2022 9:03 am

Re: Select entire row on clicking on individual series

we wanted to highlight the row on click of series not y-axis
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

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: 12
Joined: Wed May 25, 2022 6:31 am

Re: Select entire row on clicking on individual series

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: 14
Joined: Mon Aug 08, 2022 9:03 am

Re: Select entire row on clicking on individual series

click one point from the series and highlight that row
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

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: 14
Joined: Mon Aug 08, 2022 9:03 am

Re: Select entire row on clicking on individual series

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: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

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: 14
Joined: Mon Aug 08, 2022 9:03 am

Re: Select entire row on clicking on individual series

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: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

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
sachin.b-s
Posts: 14
Joined: Mon Aug 08, 2022 9:03 am

Re: Select entire row on clicking on individual series

Hi Team,

is it possible to remove the column border.

https://freeimage.host/i/LSsIcB
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Select entire row on clicking on individual series

Hi sachin.bs!

To hide these borders you can use this CSS rule:

Code: Select all

.highcharts-root .highcharts-yaxis .highcharts-axis-line {
  display: none;
}
Demo: https://jsfiddle.net/BlackLabel/2rzf3oga/

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Gantt”