Package Exports

highcharts-pattern-fill

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (highcharts-pattern-fill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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