chart.jsのデータ更新でメモリリークが発生する問題と解決方法

ちょっとハマったので記録しておきます。

問題点

Chart.jsというjavascriptライブラリを使用し、以下のようにデータ更新のたびにチャートをインスタンス化すると徐々にメモリがリークします。

let chart = new Chart(canvasContext, options);

Chartコンストラクターの第一引数はCanvasエレメントのCanvasRenderingContext2D、第二引数がチャートの描画オプションとなります。

このnew Chartをデータの更新のたびに叩くと、チャートオブジェクトがメモリから完全に消えなくなります。

解決方法

1 : チャートのインスタンスを変数に保存しておいて、データだけを書き換える。
http://www.chartjs.org/docs/latest/developers/updates.html

if (!chart) {
 chart = new Chart(canvasContext, options);
} else {
 //データのみ更新
 chart.data.datasets = options.data.datasets;
 chart.update();
}

2 : チャートの更新時に、以前のチャートを明示的に破棄する。
https://www.chartjs.org/docs/latest/developers/api.html#destroy

if (chart) {
 chart.destroy();
}
chart = new Chart(canvasContext, options);

教訓

公式ドキュメントはちゃんと読みましょう。