| commit | author | age | ||
| 83c3f6 | 1 | # Colors |
| SP | 2 | |
| 3 | When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at `Chart.defaults.global.defaultColor`. It is initially set to `'rgba(0, 0, 0, 0.1)'` | |
| 4 | ||
| 5 | You can also pass a [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects. | |
| 6 | ||
| 7 | ## Patterns and Gradients | |
| 8 | ||
| 9 | An alternative option is to pass a [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern) or [CanvasGradient](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient) object instead of a string colour. | |
| 10 | ||
| 11 | For example, if you wanted to fill a dataset with a pattern from an image you could do the following. | |
| 12 | ||
| 13 | ```javascript | |
| 14 | var img = new Image(); | |
| 15 | img.src = 'https://example.com/my_image.png'; | |
| 16 | img.onload = function() { | |
| 17 | var ctx = document.getElementById('canvas').getContext('2d'); | |
| 18 | var fillPattern = ctx.createPattern(img, 'repeat'); | |
| 19 | ||
| 20 | var chart = new Chart(ctx, { | |
| 21 | data: { | |
| 22 | labels: ['Item 1', 'Item 2', 'Item 3'], | |
| 23 | datasets: [{ | |
| 24 | data: [10, 20, 30], | |
| 25 | backgroundColor: fillPattern | |
| 26 | }] | |
| 27 | } | |
| 28 | }) | |
| 29 | } | |
| 30 | ``` | |
| 31 | ||
| 32 | Using pattern fills for data graphics can help viewers with vision deficiencies (e.g. color-blindness or partial sight) to [more easily understand your data](http://betweentwobrackets.com/data-graphics-and-colour-vision/). | |
| 33 | ||
| 34 | Using the [Patternomaly](https://github.com/ashiguruma/patternomaly) library you can generate patterns to fill datasets. | |
| 35 | ||
| 36 | ```javascript | |
| 37 | var chartData = { | |
| 38 | datasets: [{ | |
| 39 | data: [45, 25, 20, 10], | |
| 40 | backgroundColor: [ | |
| 41 | pattern.draw('square', '#ff6384'), | |
| 42 | pattern.draw('circle', '#36a2eb'), | |
| 43 | pattern.draw('diamond', '#cc65fe'), | |
| 44 | pattern.draw('triangle', '#ffce56'), | |
| 45 | ] | |
| 46 | }], | |
| 47 | labels: ['Red', 'Blue', 'Purple', 'Yellow'] | |
| 48 | }; | |
| 49 | ``` | |
