niv123
Posts: 19
Joined: Tue Jun 01, 2021 9:28 pm

Sele

Hi,
On y axis label click, I want to select the entire bar of that particular label and then be able to deselect it on clicking the label again.
Selection here would mean that the entire bar will have opacity 1 and all other bars will have 0.5 opacity
https://jsfiddle.net/5jqnv6fy/2/
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Sele

Hello, thanks for contacting us with your question! Are you sure, that you mean yAxis? In a bar chart, the chart is inverted, so yAxis is horizontal, whereas xAxis is vertical.
Paweł Lysy
Highcharts Developer
niv123
Posts: 19
Joined: Tue Jun 01, 2021 9:28 pm

Re: Sele

Hi,
Thank you for your response. Yes, that is correct. Basically I want to be able to select the entire row(horizontal bar) and then deselect it on the vertical label click
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Sele

Hi again! Here is the demo, where you can click the label to select all points on the given index: https://jsfiddle.net/BlackLabel/abq0o3xj/

In order to style it correctly, you need to overwrite the selected state like in the previous example I shared. Let me know, if that works for you! Kind regards,
Paweł Lysy
Highcharts Developer
niv123
Posts: 19
Joined: Tue Jun 01, 2021 9:28 pm

Re: Sele

Hi Pawleys,
thanks so much !
Is there a way to also deselect the selected ones by clicking the labels again?

Also, if we select/ deselect the legends this behavior the selection on labels behavior stops working

Kindly help
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Sele

Hi! If you want to select/deselect points on click, you have to pass the first argument to the select function to be null. (check API reference: https://api.highcharts.com/class-refere ... int#select

https://jsfiddle.net/BlackLabel/abq0o3xj/1/

The issue with onclick function resetting is that when you are hiding the series, you are probably destroying the label, and creating it once more. So each time, the labels are rerendered, you need to update the onclick function. Kind regards,
Paweł Lysy
Highcharts Developer
niv123
Posts: 19
Joined: Tue Jun 01, 2021 9:28 pm

Re: Sele

Got it! Thanks so much :)
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Sele

You're welcome!
Paweł Lysy
Highcharts Developer
niv123
Posts: 19
Joined: Tue Jun 01, 2021 9:28 pm

Re: Sele

Hey pawleys!
I am not able to understand how to create a new post., so asking my question here itself as it is related to the above same chart.
So i want to reduce the padding on left and right (on the outside of the widest bar) of the chart above. Is there a way i can do that?

As in, the extra space can be leveraged to make small parts of the other bars a bit wider
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Sele

hi! Here is the demo, where all of the distances/paddings/margins are lowered to minimal value so that the chart has the most space available.: https://jsfiddle.net/BlackLabel/7qmL8zn6/


Kind regards,
Paweł Lysy
Highcharts Developer
niv123
Posts: 19
Joined: Tue Jun 01, 2021 9:28 pm

Re: Sele

Hey pawleys! Thanks so much again!

One more quick question, is it possible that in this dual axis chart, https://jsfiddle.net/hczwbyt5/5/
even though you see i have made the first two values in 'rainfall' series as null, i am not able to see that value in the tooltip either.
I basically do not want to show the bar height at all when the value is 0 or null, but i also want to have minpointlength for other bars which have any values at all above 0.
2 scenarios:
1. when i make the value null, the tooltip doesnt show that series value (in that case i want to show 0)
2. i want some minpointlength but only for values above 0

Request you to help me with these two scenarios.

Thanks again!
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Sele

hi again! So basically you have everything in order, apart from the tooltip? You can just overwrite the function, that is drawing columns. Check the following demo: https://jsfiddle.net/BlackLabel/hgz1nfrs/

Kind regards,
Paweł Lysy
Highcharts Developer
niv123
Posts: 19
Joined: Tue Jun 01, 2021 9:28 pm

Re: Sele

Hi Pawleys,
Not sure if i could explain my query well. Basically, in this jsfiddle https://jsfiddle.net/40yLa7w5/1/ I do not want to show a bar when 'rainfall' series value is 0, but i want to have minPointLength for other values >0 (as being too small do not show up in the chart. eg. value 0.0002)

data: [0, 0, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 0.00002],

1. here for last value of 0.00002 , I want a small bar to appear
2. for values of 0 I do not want the bars to appear, but the 0 value should come in the tooltip for rainfall series
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Sele

yeah, sorry, so the demo is what you explained, but I had something else in mind earlier, and I forgot to update the message to you. So basically, in the demo I shared above (https://jsfiddle.net/BlackLabel/hgz1nfrs/) I overwrite the column.prototype.translate function, so that it does what you want. Check this demo, and let me know, if this is what you were looking for. Kind regards!
Paweł Lysy
Highcharts Developer

Return to “Highcharts Usage”