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?

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?

• javascript
• svg
• highcharts

• Have you tried it? It seems like normal SVG and that it SHOULD work – raam86 Commented Jul 3, 2013 at 13:19

2 Answers 2

There seems to be a pattern fill plugin.

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./demo/gfx/pattern2.png',
        width: 6,
        height: 6,
        // VML only:
        color1: 'red',
        color2: 'yellow'
    }
}