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

Single Selection

Mon Dec 03, 2018 1:36 pm

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: 676
Joined: Thu Jun 14, 2018 11:40 am

Re: Single Selection

Tue Dec 04, 2018 12:55 pm

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 Developer

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

Re: Single Selection

Tue Dec 04, 2018 3:05 pm

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: 34
Joined: Fri Aug 17, 2018 9:57 am

Re: Single Selection

Tue Dec 04, 2018 3:37 pm

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: 676
Joined: Thu Jun 14, 2018 11:40 am

Re: Single Selection

Wed Dec 05, 2018 12:57 pm

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 Developer

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

Re: Single Selection

Wed Dec 05, 2018 4:28 pm

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: 676
Joined: Thu Jun 14, 2018 11:40 am

Re: Single Selection

Wed Dec 05, 2018 5:22 pm

Okkey ;) do you need anything else from me at this moment?
Rafal Sebestjanski,
Highcharts Developer

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

Re: Single Selection

Thu Dec 06, 2018 9:16 am

not at the moment, thank you very much :)

Return to “Highcharts Usage”