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
            }
        }]
    },

Demos

• Default patterns
• Custom pattern
• Version 1, oldIE compatible
• Opacity demo

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 file
• width The width of the image file
• height The height of the image file
• color1 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.