Geek Answers Handbook

Use fill pattern instead of color with HighCharts

I looked at various ways to create graphs in webapps and found HighCharts particularly useful. The application should satisfy color blindness, so I am considering using patterns instead of fill colors - as described in this question .

Something like this should 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 will have fill="url(#triangles)"

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

+7
javascript svg highcharts
source share
2 answers

It seems like a plugin to populate templates .

+5
source share

You can use the Highcharts plugin for this . The theme is created here .

For example, for a 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' } }
+4
source share

More articles:


All Articles