Tengo este complemento para chart.js que representa rellenos degradados para un gráfico de barras apiladas en afterRender. Los rellenos de gradiente se vuelven visibles si cambio el tamaño de la ventana del navegador o llamo a chart.update() en una función onClick. El gradiente de fondo se vuelve visible cuando paso el mouse sobre cada elemento individual del gráfico de barras.

Llamar a chart.update() dentro de ese complemento obliga a que todos los gradientes se dibujen en la primera representación del gráfico de barras apiladas, pero parece desencadenar un efecto desbocado en el que la actualización del gráfico desencadena una nueva representación y eso no parece bueno.

Así que estoy un poco desconcertado sobre lo que está yendo mal aquí. Llamar a chart.update() en un enlace de React no tiene el efecto esperado para mí. ¿Cómo me aseguro de que este complemento se ejecute y se complete antes del primer sorteo? ¿O tal vez hay algo más fundamentalmente erróneo en esto?

Estoy usando react-chartjs-2.

Ejemplo de código: https://codesandbox.io/s/blissful-monad-vq1fn?file=/App.tsx

Agradezco cualquier entrada en este