jb3_2
Posts: 48
Joined: Wed Sep 20, 2017 12:05 pm

Outline shapes hidden by click onto classed colorAxis

Hi,

I have a choropleth map that uses a categorized colorAxis. Now when I click on the legend item, the corresponding shapes are hidden from the map. If I click on all legend items, the map looks a bit empty.

See example here (click on all legend items): https://jsfiddle.net/jb3_2/3z6td5vx/

How can I outline the hidden shapes (or show them using a light gray fill) in order to show what has been hidden?

Thanks for your help!
J.
Attachments
OutlineHiddenShapes.jpg
OutlineHiddenShapes.jpg (32.87 KiB) Viewed 828 times
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Outline shapes hidden by click onto classed colorAxis

Hello, jb3_2!

1) I copied your whole series and paste as a fake first series (to be underneath the main series). Fake series goes from line 7 to line 3332 (but I wouldn't believe jsFiddle because by so many lines it might get a little bit confused ;D).

2) I set up data to 999 (just before 3332 line).

3) I moved borderColor property from line 3230 to line 11 so we can have easy access to this.

4) I used enableMouseTracking property to false and color property to #ededed

You can look at the result here: https://jsfiddle.net/BlackLabel/4megLynj/


The second appoach you desire is to outline the hidden shapes. To do this we will use for our fake series borderWidth property, change borderColor to #ededed and change series color to #fff or whatever colors you like: https://jsfiddle.net/BlackLabel/awf69bct/

API Reference: https://api.highcharts.com/highmaps/ser ... seTracking

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
jb3_2
Posts: 48
Joined: Wed Sep 20, 2017 12:05 pm

Re: Outline shapes hidden by click onto classed colorAxis

Hi Rafal,

Absolutely fabulous! Thank you, that works like a charm. I also had to make sure the dataClasses in the colorAxis all have a from and a to property defined (and the fake data 999 you used in the first map is outside of the boundaries of any dataClass).

All the best,
Jonas

Return to “Highcharts Maps”