[Chartjs]-How to add background image in bar chart column in Chart.js?

0👍

ctx.createPattern() is a 2d canvas function, with patchy standards. I found the behavior for repeat-x and repeat-y to vary between browsers. The example linked here works in Firefox (apart from the series icon missing the background image with repeat-y) and is blank in Chromium, but the situation reverses for this W3Schools example, Chromium working and Firefox only working with repeat and no-repeat, likely due to a long-standing bug.

The provided code is barely modified from a Chart.js sample and looks fine other than an “Unable to parse color from object” error, that may or may not have been related; the problem is likely a mix of library and browser rather than anything in the code. For anyone else trying for a simple patterned background, I recommend cutting losses and using the pattern method mentioned in the last two links.

Leave a comment