Chart.js: [FEATURE] Image as background

[Doktor-Avalanche]

Is it possible to add the possibility to add an image as background of a chart?

Kind regards

[simonbrunel]

What about using css: https://jsfiddle.net/8zfpduwk/?

<canvas style="background-image: url({url_to_image})"></canvas>

[engelby]

I had a very similiar problem and spent the better part of yesterday working out a solution. With the help of this StackOverflow link I came up with this (functional work-in-progress) https://jsfiddle.net/pt7ozm4h.

Setting the backgrounds with this method will get saved if you export the data to an image with .toDataURL("image/png") or 'right-click save image as...'. The CSS way of setting the backgrounds does work visually in the browser, but since the image data isn't a part of the DOM, there is no data in the bitmap to get saved. It depends on what your needs are.

When specifying an image for the background it is necessary to get the image data prior to rendering the chart, otherwise you'll end up with a black background at best. In the fiddle example, I used a very small image encoded to Base64 as a proof-of-concept. To get a workable solution for images, https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage will be of great help.

[moffsugita]

I hope the feature.
If I use css, The image converted by toBase64Image() doesn't appear background.

[caneta]

What about using css: https://jsfiddle.net/8zfpduwk/?

<canvas style="background-image: url({url_to_image})"></canvas>

This works but the image is also under the legend and axis labels, which is not always desireble.

Have you got any suggestions to show an image only under the chart?

[etimberg]

To draw the image only on the chart area, you could use a plugin that hooks into the beforeDatasetsDraw event and use drawImage to draw the image onto the chart area. You can find the dimensions of the chart area from the chartArea property of the chart instance

[caneta]

Thank you @etimberg. I will give a try to your suggestion, even if my need would be to repeat an image in order to create a texture, like with background-repeat for CSS: I don't know if this is doable...

[etimberg]

@caneta if you need a repeat, you can use your image to make a CanvasPattern and draw that under the chart area.