pattern-fill

Highcharts plugin for creating pattern fills in any area, like area charts, chart backgrounds, plot bands or columns.

Deprecation notice

Given the popularity of this plugin, it has been taken in as a Highcharts module since v6.1, and development will continue in the official Highcharts repo. This means it can be loaded from code.highcharts.com and is available with the Highcharts npm package. Issues should now be reported in the Highcharts repo. See the pattern fills blog article for a tutorial, and PatternOptions in the API for options details.

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

• Pie with default patterns
• Map with default patterns
• Custom pattern
• Version 1, oldIE compatible

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.