Highcharts pattern fill how to bring the shapes closer together?

Question

I created the following pattern in Highcharts:

and I am wondering how to bring the pattern closer together, I looked throughout their entire api but found nothing, I adjusted the height and width and nothing.

     pattern: {
        path: {
             d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
             strokeWidth: 3

                },
        height:10, 
        width:10, 
        r:4,
        color:'#d4483d'

score 2 · Accepted Answer · answered Sep 07 '18 at 12:35

2

You need to reduce not only pattern height and width, but also change path:

    color: {
        pattern: {
            path: {
                d: 'M 0 0 L 6 6 M 5 -1 L 7 1 M -1 5 L 1 7',
                strokeWidth: 3

            },
            height: 6,
            width: 6,
            r: 4,
            color: '#d4483d'
        }
    }

Live demo: https://jsfiddle.net/BlackLabel/5fg2zd1y/

Docs: https://www.highcharts.com/blog/tutorials/pattern-fills/

answered Sep 07 '18 at 12:35

ppotaczek

36,341
2
14
24

you are a lifesaver! Thanks!! but how would I flip the diagonal lines ? I am not too well versed on d paths – Ariel Kotch Sep 07 '18 at 14:23
1

Hi Ariel Kotch, Here is an example of inverted lines: https://jsfiddle.net/BlackLabel/buyj2hwv/ – ppotaczek Sep 08 '18 at 11:37

Highcharts pattern fill how to bring the shapes closer together?

1 Answers1