anmeeks
Posts: 1
Joined: Fri Jun 23, 2023 1:24 pm

Pattern fill scale

Fri Jun 23, 2023 3:04 pm

When I use either a custom path or one of the default patterns on the provided map of the US with territories, the patterns are huge. If several states are included in the pattern, it is discernable. But if a smaller state has a pattern, it might only be half-filled or be entirely a solid color. Is there a way to adjust the scale of the pattern? I would like someone looking at my map, who happens to be colorblind, to be able to tell, if need be, that Rhode Island has a different fill than Connecticut.

I tried changing height and width but that seems to just determine the spacing of the svg, and either overlaps or spreads the repeating tiles apart.

Attached is a screenshot of what I see using this JS fiddle

https://jsfiddle.net/taw2biw003/g6pbsw30/22/
Screenshot 2023-06-23 110204.png
Screenshot 2023-06-23 110204.png (59.36 KiB) Viewed 280 times

jakub.j
Posts: 857
Joined: Tue Jan 24, 2023 11:14 am

Re: Pattern fill scale

Mon Jun 26, 2023 11:08 am

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

There is a possibility to scale the patterns, but only the custom ones. You can do it by setting pattern.patternTransform to scale value of some sort.
I also extracted your pattern into an object which can be reused in many points and also transformed your path, replacing the commas with spaces.

Demo: https://jsfiddle.net/BlackLabel/6ct87q4u/

For more information about pattern fills I invite you to read this article about them -> https://www.highcharts.com/docs/chart-d ... tern-fills

I hope you will find it useful
Best regards
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Maps”