highcharts-pattern-fill
v3.0.3
Published
Highcharts pattern fill plugin for Highcharts 4. For Highcharts 3.x, the pattern fill version 1.0.x was used.
Downloads
38,494
Readme
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: Highcharts.getOptions().colors[0],
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.