Configuration "animation: false" doesn't load point icon images

[DaviR87]

Expected behavior

On chart load, the point with a pointStyle associated, should render the image immediatly when animation is set to false.

Current behavior

The image is not rendered until some user interaction happen

Reproducible sample

https://jsfiddle.net/4fq8o162/13/

Optional extra steps/info to reproduce

Open the jsfiddle, open the chrome web tool and Disable Cache in Network tab. Load the page again, then click on where a image should be to see the image load.

I cannot reproduce it on codepen but i made it a reproduction sample on jsfiddle and stackblitz:

• https://stackblitz.com/edit/vitejs-vite-ttxbvw?file=index.html,package.json,main.js&terminal=dev
• https://jsfiddle.net/mgpvc6so/1/

Possible solution

Re-render the chart when the page/component is fully loaded. For example in an Angular component ngAfterViewInit: setTimeout(() => this.chart?.chart?.render(), 1000);

Context

I want to set animation false and images that load up immediatly without user interaction. I don't want to use my provided possible solution.

chart.js version

4.4.0

Browser name and version

Google Chrome 123.0.6312.86 (64 bit)

Link to your project

No response

[LeeLenaleee]

Images are an async process. Chart.js does not reload automatically for you so you will need to do that yourself by using the onload callback of the image.

The reason it works with animations is because after a few animation frames the image is loaded and used.

https://jsfiddle.net/nqu6ta9c/2/

[LeeLenaleee]

Closing as this is not a bug