PATTERN FILL

PATTERN FILL

Summary:
Highcharts pattern fill plugin for Highcharts 4. For Highcharts 3.x, the pattern fill version 1.0.x was used.
Language:
License:
MIT
Author:
Is actively maintained:
No

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

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.

DEMO

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

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.

DEMO