Chart.js: 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.

[ashiguruma]

What about checking for a CanvasPattern in setHoverStyle?

setHoverStyle: function(arc) {
  var dataset = this.chart.data.datasets[arc._datasetIndex];
  var index = arc._index;

  var backgroundColor = (arc._model.backgroundColor instanceof CanvasPattern) ? arc._model.backgroundColor : helpers.color(arc._model.backgroundColor).saturate(0.5).darken(0.1).rgbString();

  arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, backgroundColor);
  arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(arc._model.borderColor).saturate(0.5).darken(0.1).rgbString());
  arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth);
},

I agree it would be nice to have the pattern generation taken care of by an external library.

[etimberg]

Yeah, that's a good idea. Should make a helper function because it will be used in all controllers

[ashiguruma]

I've added a helper method and some tests. If you're happy with the format and naming I'll add this to other chart types.

[etimberg]

@ashiguruma looking good. The one thing I would caution would be that it shouldn't necessarily be hover background specific (someone could set a pattern for a line stroke for instance) so the helper might need a rename

[etimberg]

also, heads up that this will become a lot simpler once #2491 is merged since I'm trying to consolidate all of the hover style functions

[ashiguruma]

Good point. I've renamed the method. In light of #2491 should I hold off updating all chart types?

[etimberg]

No, you can go ahead and update them all. I'll take care of any merging due to 2491

[ashiguruma]

Done. Will take a look at how to simplify pattern generation with a library/plugin.

[etimberg]

@ashiguruma looks good. can you PR it?

[ashiguruma]

How about the below for usage of some form of pattern helper?

pattern(shape, backgroundColor, [patternColor, size]);

Shape can be either a string matching a set of pre-defined patterns or a custom pattern canvas.

datasets: [{
  data: [300, 50, 100],
  backgroundColor: [pattern('circle', '#f7464a'), '#46bfbd', '#fdb45c']
}]

Could alternatively add a pattern option to the config that would auto-generate the patterns using the colors supplied although this is seems less flexible.

datasets: [{
  data: [300, 50, 100],
  backgroundColor: ['#f7464a', '#46bfbd', '#fdb45c'],
  pattern: true
}]

[etimberg]

A pattern helper is a good idea. I don't think it should live in the core though otherwise we're just going to increase the size

[ashiguruma]

True. An external pattern generator makes most sense. I've already started looking at that implementation so will update the issue accordingly.

[kenjinp]

There's a problem when drawing the legend squares as well in label mode

[ashiguruma]

@kenjinp do you have a screen shot and/or some example data to go on?

[ashiguruma]

I've put together the beginnings of a pattern generator library. Needs more patterns and also some work on scaling. Will get some more patterns in. @etimberg is it worth updating the documentation once there are more patterns?

[etimberg]

@ashiguruma yup, we can update the documentation. If you'd like we could also link to your pattern generator library :smile:

[ashiguruma]

@etimberg Here's the library for pattern generation. Works quite nicely with large block colors. Happy to update the documentation.

[etimberg]

:D looks great. I'll happily merge a docs update linking to this

[etimberg]

Closing since @ashiguruma has written a great library to make these patterns and I merged the docs update in #3114