ChartsJS: Memory leak after ajax updates

Describe the defect On our page we have multiple p:barChart components that are updated with ajax when there is new data available. After a while an out of memory error occurs in the browser. Some investigation showed that the JavaScript object Chart of the ChartJS library keeps all the old chart instances and after an update also has the new ones. So this probably also affects other types of charts that are drawn using ChartJS.

Environment:

• PF Version: 10.0.0
• JSF + version: Mojarra 2.3.14
• Affected browsers: ALL

To Reproduce Steps to reproduce the behavior:

1. Have a p:barChart on your page, you can just use the showcase for this.
2. Update it with ajax, e.g. add the following button and click it a few times:

<p:commandButton value="update" update="@(.ui-chart)" oncomplete="console.log(Chart.instances)"/>

1. Check the browser’s JavaScript console.
2. See the error, after each update, the number of instances grows and grows.

Expected behavior No longer used chart instances should not remain in memory. According to the ChartJS documentation, probably the destroy() method should be called for all no longer used chart instances, see: https://www.chartjs.org/docs/latest/developers/api.html#destroy

[jthalmai]

Thanks, this works.

[jthalmai]

The MonkeyPatch works for us. Only the current instance is kept.