Using a fill pattern instead of colour with HighCharts

Question

I've been looking at various ways to produce graphs in webapps and have found HighCharts particularly useful. The app needs to cater for colour blindness so I am looking at using patterns instead of fill colours - as described in this question.

Something like this needs to be in the <defs> section of the SVG:

<pattern id="triangles"  width="10" height="10" patternUnits="userSpaceOnUse">
    <polygon points="5,0 10,10 0,10"/>
</pattern>
<pattern id="diagonal-hatch" patternUnits="userSpaceOnUse" width="4" height="4">
    <path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"/>
</pattern>
<pattern id="cross-hatch" patternUnits="userSpaceOnUse" x="0" y="0" width="6" height="6">
    <g style="fill:none; stroke:#22fa23; stroke-width:1">
        <path d="M0,0 l10,10"/>
        <path d="M10,0 l-10,10"/>
    </g>
</pattern>

and then instead of fill="#0d233a" I'd have fill="url(#triangles)"

Has anyone else done this with HighCharts? Is it even possible to get HighCharts to do this without hacking it to pieces?

Answer 1

There seems to be a pattern fill plugin.

Answer 2

You can use Highcharts plugin for that. Topic is created here.

For example patter for series:

{
    type: 'column',
    data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
    color: {
        pattern: 'http://highcharts.com/demo/gfx/pattern2.png',
        width: 6,
        height: 6,
        // VML only:
        color1: 'red',
        color2: 'yellow'
    }
}