【Chart.js】図のタイトルを複数行にする

JavaScript

環境

  • Chart.js 2.9.4

方法

Chartのoptionsのtitleに配列でStringを渡す。

window.onload = function() {
    // 積み上げ棒と折れ線
    var ctx = document.getElementById('canvas').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    Math.floor(Math.random() * Math.floor(100)),
                    Math.floor(Math.random() * Math.floor(100)),
                    Math.floor(Math.random() * Math.floor(100)),
                ],
                backgroundColor: [
                    'rgb(255, 0, 0)',
                    'rgb(0, 255, 0)',
                    'rgb(0, 0, 255)',
                ],
                label: 'Dataset pie'
            }],
            labels: [
                'Red',
                'Green',
                'Blue',
            ]
        },
        options: {
            title: {
                display: true,
                text: ['Title Line', 'New Line!'] // HERE!
            }
        }
    });
}

参考