jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Single Selection

Hi,

Further to the help you gave me here:
viewtopic.php?f=9&t=41152

I would like to force only single selection. i.e. neither the ctrl nor the shift key will allow the user to select more than one segment on the stacked bar.

would you be able to help?

here is the jsfiddle you provided in the topic above:
https://jsfiddle.net/wchmiel/m9kz4ufc/2/

thanks
Jane
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Single Selection

Hi, Jane!

You can code the whole "selecting" behavior on your own to have full control of it. Set allowPointSelect to false and add point.click event like this:

Code: Select all

click() {
            this.select();
          }
You only need to adapt your selectPoint and unselectPoint functions to the new mechanism.

I'll be here in case of any problems with implementing that ;)

jsFiddle allowing to select only one point: https://jsfiddle.net/BlackLabel/v52gt4yh/

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: Single Selection

Great, thanks Rafal.

I have that working for the stacked bar however I'm trying to implement single select for the pyramid but I have one issue I'm unsure how to resolve.

when allowPointSelect = true, the datalabels are clickable and select the point, as shown here:
https://codepen.io/jharri/pen/eQMpjQ

However when I set allowPointSelect = false and handle the click manually as you suggest, the datalabels are no longer clickable and the point doesn't get selected.
I can't see anything in the API reference that would indicate there are any events on the label itself to hook into.

Is there anything you can suggest to replicate the label behaviour when allowPointSelect = true?
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: Single Selection

I've found the problem.

it's because I am using e.target of the clicked event to set add a class and to change the stroke attribute to #333 when a section is selected.

However when a label is clicked the data label itself is e.target (duh!)

so my next question is how can I get around this?
I don't have access to the classes or attributes on the point from the point itself
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Single Selection

Hmmm, I'm a little bit confused now :D just to be sure - you want to have access to the point through the dataLabel click?
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: Single Selection

haha yeah bit confusing!

However, my colleague has found a fix... rather than using e.target we can use point.graphic.element to have access change the classList and update the attributes :)
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Single Selection

Okkey ;) do you need anything else from me at this moment?
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: Single Selection

not at the moment, thank you very much :)
prashantrai27
Posts: 9
Joined: Wed Jan 19, 2022 9:51 am

Re: Single Selection

Hi @rafalS, I have similar query regarding single selection but it is related to split packed bubble chart.
In that one we have bigger bubble consisting of single bubbles. only one at a time should be selected. how to achieve that can you help?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Single Selection

Hi prashantrai27,

The question is indeed similar, but series type is different and most likely will require different approach. Please create a new topic with detailed description and simplified live demo with your chart.

Thanks in advance.
Regards!
Mateusz Bernacik
Highcharts Developer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Single Selection

prashantrai27,

I have just noticed that you have already created a separated topic and asked that question: viewtopic.php?f=9&t=48028

Please wait patiently for your answer there. Also, please do not duplicate question across multiple topics, we work as a single support team and we do our best to answer asap.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”