CODEWITHSUNDEEP
highchartsreact-highcharts
Atul
Atul

Reputation: 38

how can we set different colors to highcharts-default-patterns?

I want to show diagonal striped patterns of desired color in stacked column bar graph. i am using default pattern url(#highcharts-default-pattern-0) for it, but unable to change color of it as i want this pattern in various colors.

For reference i am attaching image which i want to achieve using diagonal stripes.diagonal-striped-columns

I tried to achieve it using pattern-fills but was unable to get it.

Please provide your valuable inputs. Thanks in advance!

Upvotes: 2

Views: 1738

Answers (1)

ppotaczek
ppotaczek

Reputation: 39149

The best way is to use the official pattern-fill module:

plotOptions: {
    series: {
        color: {
            pattern: {
                path: {
                    d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
                    strokeWidth: 2
                },
                width: 10,
                height: 10,
                opacity: 0.4
            }
        }
    }
}

Live demo: https://jsfiddle.net/BlackLabel/0etopfLs/

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

Upvotes: 4

Related Questions