Configure background patterns to aid color vision deficient viewers

[ashiguruma]

Is there a way to add background images to chart fills? Patterns can be added to the legend as its template is configurable, however it doesn't currently appear possible to configure the background image of chart fills.

To aid comprehension by color vision deficient viewers it would be useful to add simple patterns. Image files or base64 encoded patterns like those shown below could be specified in the chart config.

Would it be worth creating a pull request for this?

[etimberg]

@ashiguruma we do not yet have this. It would be great if you could submit a PR for the v2.0 version.

[etimberg]

I should add that this would work in v1 by setting the fillColor to a CanvasPattern object. See MDN for how to create one.

This may work as well in v2, but requires some testing.

[ashiguruma]

Thanks for the pointer. Using CanvasPattern does work in both v1 and v2 out of the box but with two caveats.

1. There doesn't appear to be a way to set a background colour under the pattern image. Setting the background-color of the image itself doesn't work.
2. Chart.js v2 throws the error Uncaught Error: Unable to parse color from object {}, as a result the hover state fails.

Will investigate the error in v2 and a possible background colour solution.

[etimberg]

The v2 error comes when no hover colour is specified. We use a library to try and mix the fill colour, which doesn't work with a pattern object. I'll put some thought into a nice way to handle this.

Setting the background colour is difficult. What if you:

1. Create a canvas element and fill the background colour as a rectangle the size of the pattern
2. Fill the pattern onto that canvas
3. Create a new pattern from the canvas

[ashiguruma]

Your idea worked well with v1. Here's a JSFiddle of the solution.

The code required to achieve the effect is a little bulky. Will need to write some kind of helper to create multiple pattern fills and highlight states.

Will take a look at v2 to see what the options for this might be.

[etimberg]

I added some documentation on this at http://www.chartjs.org/docs/#getting-started-colors
I think this would do well as an external library for generating patterns. Then they can be attached to the chart config

[etimberg]

I updated the fiddle for v2: https://jsfiddle.net/b0g6d8zL/1/
I still get an error when setting hover styles. I think we can fix that easily enough.