Chart.js: Custom pointStyle with animated image SVG file and Chart JS

[vungho]

I use ChartJs to draw charts and try to change pointStyle. I want to use animations with the svg format to customize the pointStyle, but it does not have motion effects on the chart. I do not know if it is possible to draw svg images onto canvs, please help me. Thank you very much This is my code: Codepen

Sorry I can not upload the code here

[etimberg]

@vungho the chart does not animate because the SVG is frozen in time when it is drawn on the canvas. If you continuously move your mouse over the canvas so that the chart redraws the points animate as expected.

What you could do here is continuously call .render() on the chart, however you may run into performance issues. https://github.com/chartjs/Chart.js/blob/master/docs/developers/api.md#renderduration-lazy

[vungho]

@etimberg Thank you for the support, i tried the above method and so true, the performance of the chart is drawn not good. But do we have a substitute, eg gif, css?

[etimberg]

@vungho unfortunately not. That's the nature of canvas drawing unfortunately. You could try and overlay gifs in the correct location, but that might be difficult.

[vungho]

@etimberg , oh thank you for the supported, Maybe i have to try with this solution :))

[etimberg]

Closing as answered