[Bug]: Re-rendered multiple time while using afterDraw #1215
Description
Would you like to work on a fix?
- Check this if you would like to implement a PR, we are more than happy to help you go through the process.
Current and expected behavior
I am making a stacked bar chart with label text is replaced with image but my handleDrawImage runs multiple times in the first-time component render and hovering to display tooltip that causing performance issue
const handleDrawImage = (chart: ChartJS) => { const { ctx } = chart; const dataLength = plans ? plans.length : 0; const chartHeight = chart.chartArea.height; const step = (chartHeight - barSize * dataLength) / dataLength; const yOffset = 30; ctx.save(); plans?.forEach((item, i) => { let newImage = new Image(); newImage.src = "Image source here"; const imageY = i * (barSize + step) + yOffset; ctx.drawImage(newImage, 0, imageY, 30, 30); }); ctx.restore(); }; return ( <div className="col-span-9"> <div className="w-full flex items-center justify-center"> <Bar data={data} height={400} options={chartOptions} redraw={true} plugins={[ { id: 'sectorBackground', afterDraw: (chart) => handleDrawImage(chart), }, ChartDataLabels, ]} /> </div> </div> ); Reproduction
N/A
chart.js version
"^4.4.3"
react-chartjs-2 version
"^5.2.0"
Possible solution
No response