I have this plugin for chart.js that renders gradient fills for a stacked bar chart on afterRender. The gradient fills all become visible if i resize the browser window, or call chart.update() in an onClick function. The background gradient becomes visible when I hover on each individual element of the bar chart.

Calling chart.update() within that plugin forces all gradients to draw on the first render of the stacked bar chart, but seems to trigger a runaway effect where the updating of the chart triggers a re-render and that doesn't seem good.

So I'm a little puzzled on what's going wrong here. Calling chart.update() in a React hook doesn't have the expected effect for me. How do I make sure that this plugin runs and completes before the first draw? Or is there perhaps something more fundamentally wrong with this?

I am using react-chartjs-2.

Code sample: https://codesandbox.io/s/blissful-monad-vq1fn?file=/App.tsx

Appreciate any input on this