Chart.jsで描写したグラフを画像としてダウンロードさせる方法

サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当該グラフを画像としてダウンロードさせたかった。追加のプラグイン等が必要かと思って調べたところ、標準搭載されているAPIで対応できるみたい。以下に対応方法及びサンプルをメモ。

サンプル

https://taitan916.info/sample/chart.js/image_download/

ページ左下の「ダウンロード」ボタンをクリックするとgraph.pngがダウンロードされる筈。

対応方法

ソースコード

<canvas id="graph"></canvas>
<button id="download">ダウンロード</button>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.querySelector('#graph').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
        datasets: [
            {
                label: '売り上げ',
                data: [100, 200, 80, 160, 90, 110]
            }
        ]
    },
    options: {
        title: {
            display: true,
            text: '折れ線グラフ'
        },
        scales: {
            y: {
                suggestedMin: 0,
                suggestedMax: 300
            }
        }
    }
});

const image = myChart.toBase64Image();

document.querySelector('#download').onclick = function() {
    const a = document.createElement('a');
    a.href = myChart.toBase64Image();
    a.download = 'graph.png';
    a.click();
}
</script>

リファレンス

.toBase64Image

https://www.chartjs.org/docs/latest/developers/api.html#tobase64image-type-quality