I am trying to add an image instead of a color to the dataset of a bar graph in Chart.js using Vue.js. All examples I found to implement this seem to indicate that the graph needs to be already rendered before applying this fill (refer to https://www.chartjs.org/docs/latest/general/colors.html).
I am pulling the chart from a context before modifying it again. When I use this approach:
<Bar v-if="loaded" :data="chartData" :options="chartOptions" ref="bar"/>
this.$refs.bar.getContext('2d')
It fails with "Cannot read properties of null (reading 'getContext')." I am calling this chart render on a Vue mounted hook.
is there any way to add a background on the chartjs framework, as a part on the initial render, passing those in on the "chartData" object.
Able to get it to work, still seeing issues though it fails to load the background img intermittently. Not able to recreate the issue see https://jsfiddle.net/emsq26co/
It fails to load the background (for some reason comes up on hover) think it relates to not being able to delete the old chart , Chart.getchart does not work on 2.7.2 tried using cdnjs for 4.3.0 , chart does not come up.
Works fine in sandbox ; https://codesandbox.io/s/jovial-maxwell-dtqlq3?file=/src/components/HelloWorld.vue , no intermittent issue observed. Have uploaded an example on this issue @ https://github.com/webtechux/vue.git , seems to work on edge. Chrome and opera not so much.
Any resize of the bowser allows the background to come through, again including 'maintainAspectRatio' on the options, also seems to cause issues.
The image onload allocates only an event handler , so there is need to wait on the process to complete. so define a promise , having the onload resolve and finally awaiting on the promise , is required to sort out any partial background render that may occur.
Have updated github with changes for anyone looking for details.
Would think the original chartjs snippet should also reflect.