Page 1 of 1

Select entire row on clicking on individual series

Posted: Wed Sep 21, 2022 12:45 pm
by Jaws
The goal is to select series and highlight the entire row.

https://jsfiddle.net/v9npkez6/

Re: Select entire row on clicking on individual series

Posted: Wed Sep 21, 2022 12:50 pm
by hubert.k
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!

Re: Select entire row on clicking on individual series

Posted: Thu Sep 22, 2022 5:52 am
by sachin.b-s
we wanted to highlight the row on click of series not y-axis

Re: Select entire row on clicking on individual series

Posted: Thu Sep 22, 2022 6:14 am
by hubert.k
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.

Re: Select entire row on clicking on individual series

Posted: Thu Sep 22, 2022 10:12 am
by Jaws
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?

Re: Select entire row on clicking on individual series

Posted: Thu Sep 22, 2022 11:39 am
by sachin.b-s
click one point from the series and highlight that row

Re: Select entire row on clicking on individual series

Posted: Fri Sep 23, 2022 7:20 am
by hubert.k
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!

Re: Select entire row on clicking on individual series

Posted: Fri Sep 23, 2022 12:24 pm
by sachin.b-s
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/

Re: Select entire row on clicking on individual series

Posted: Fri Sep 23, 2022 12:38 pm
by hubert.k
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!

Re: Select entire row on clicking on individual series

Posted: Fri Sep 23, 2022 6:53 pm
by sachin.b-s
hi there,
But still the first 3 category doesn't highlight the row. Did we miss anything in render() within the chart option ?

Re: Select entire row on clicking on individual series

Posted: Mon Sep 26, 2022 10:38 am
by hubert.k
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!

Re: Select entire row on clicking on individual series

Posted: Mon Oct 03, 2022 7:06 am
by sachin.b-s
Hi Team,

is it possible to remove the column border.

https://freeimage.host/i/LSsIcB

Re: Select entire row on clicking on individual series

Posted: Mon Oct 03, 2022 9:57 am
by hubert.k
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!