【Chart.js使ってみた】グラフにタイトルを付ける方法

5教科のテスト結果の棒グラフです。
なるべくシンプルな設定でグラフを作成しました。

<div class="chart-wrap"><canvas id="myChart" width="400" height="200"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var data = {
    // 横軸
    labels: ['国語', '数学', '理科', '社会', '英語'],
    // データ
    datasets: [{
        label: '点数',
        data: [72, 98, 92, 78, 82],
    }]
};
var options = {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true // Y軸を0から始める
            }
        }]
    }
};
var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});
</script>

グラフにタイトルをつける

上のグラフに対してタイトルを付け、何のグラフか分かりやすくします。変更する箇所は「options」のみです。※scalesの括弧閉じ「}」の後ろにカンマを忘れないようご注意ください。

var options = {
    scales: {
        ・・・
    }
};

optionsに対して、下記を追記すればOKです。

var options = {
    scales: {
        ・・・ 
    },
    title: {
        display: true, // タイトルを表示する
        text: 'らっく君の高校２年の期末テストの結果' // タイトルのテキスト
    }
};

実際にタイトルを入れてみる

グラフに対してタイトルが表示されました。

全体のソースを貼っておきます。ソース上をクリックするとコピーできます。

<div class="chart-wrap"><canvas id="myChart" width="400" height="200"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var data = {
    // 横軸
    labels: ['国語', '数学', '理科', '社会', '英語'],
    // データ
    datasets: [{
        label: '点数', // グラフのタイトル
        data: [72, 98, 92, 78, 82],
    }]
};
var options = {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true // Y軸を0から始める
            }
        }]
    },
    title: {
        display: true, // タイトルを表示する
        text: 'らっく君の高校２年の期末テストの結果' // タイトルのテキスト
    }
};
var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});
</script>