From e70a1c85cfd1d779f5a492cb9c9cecb3f1704e2d Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sun, 24 Apr 2016 16:28:10 -0400 Subject: [PATCH] Mention what type of color options are supported --- docs/00-Getting-Started.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/docs/00-Getting-Started.md b/docs/00-Getting-Started.md index 82d2349d2..9a39cf271 100644 --- a/docs/00-Getting-Started.md +++ b/docs/00-Getting-Started.md @@ -246,3 +246,32 @@ Chart.defaults.global.responsive = true; ``` Now, every time we create a chart, `options.responsive` will be `true`. + +### Colors +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. + +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. + +The final option is to pass a [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern) object. For example, if you wanted to fill a dataset with a pattern from an image you could do the following. + +```javascript +var img = new Image(); +img.src = 'https://example.com/my_image.png'; +img.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + var fillPattern = ctx.CreatePattern(img, 'repeat'); + + var chart = new Chart(ctx, { + data: { + labels: ['Item 1', 'Item 2', 'Item 3'], + datasets: [{ + data: [10, 20, 30], + backgroundColor: fillPattern + }] + } + }) +} + +``` + +It is common to spec \ No newline at end of file -- 2.47.3