pattern-fill
Highcharts plugin for creating pattern fills in any area, like area charts, chart backgrounds, plot bands or columns.
Usage
In version 2, add a defs
object to the options. Create a patterns
array under defs
. Each item in this array represents a pattern. To use a pattern, set the color to url(#id-of-pattern)
. Version 1 worked with oldIE, but the downside is that image files are required for the patterns.
defs: patterns: 'id': 'custom-pattern' 'path': d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11' stroke: Highchartscolors0 strokeWidth: 3 // ... the rest of your chart data here ... series: 'data': 1 2 3 4 'color': 'url(#custom-pattern)'
Demos
Compatibility
Versions 1.x are compatible with Highcharts 3. Versions 2.x are compatible with Highcharts 4.
Options for version 1:
pattern
: The URL for a pattern image filewidth
: The width of the image fileheight
: The height of the image filecolor1
: In oldIE, bright colors in the pattern image are replaced by this color. Not yet implemented in SVG.color2
: In oldIE, dark colors are replaced by this.