Pattern Fill using reference to SVG defs?

[KingWebsites]

Hello, I'm trying to pattern fill some countries on the world map using an older example of a Highcharts Map I've seen online. Looking at their code they have set their SVG patterns in defs : { patterns : ... } then they are referring to these patterns in their series data using series: data : [ color: url(#name-of-new-pattern) ]
Has this functionality been removed in more recent versions of Highchart Maps? I noticed that in this example I don't think the default highchart patterns are working now: https://jsfiddle.net/highcharts/3m1hjja6/
So I suppose my question is do SVG patterns have to be added individually to every data item or can they be added in the SVG's <defs><pattern> area?
Thanks.

[kamil.k]

Hello There!

Welcome to our forum and thanks for contacting us with your question.

You can define the pattern by the defs.patterns property and then reference to it by the id (https://jsfiddle.net/BlackLabel/zh1ks0ax/), or use the built-in ones by defining the url(#highcharts-default-pattern-{index}) values (https://jsfiddle.net/BlackLabel/5udv0a2k/).

If you take a closer look at the above examples, you can see I used the v8 of Highcharts as unfortunately, we're facing a bug here which I already reported: https://github.com/highcharts/highcharts/issues/19551.

As a workaround, you should use the TopoJSON map format instead of the GeoJSON one, see: https://jsfiddle.net/BlackLabel/Lnfyrsep/. It works fine with the current HC version but there's a difference in the displayed pattern which I also reported, and which I suppose needs a bit more investigation.

Feel free to read more about the TopoJSON format:
- https://www.highcharts.com/blog/tutoria ... json-maps/
- https://www.highcharts.com/blog/tutoria ... -highmaps/

Sincerely apologize for the inconvenience,
Kind Regards!