AlexMayants/pattern-fill

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

• 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.