Layout Configuration

レイアウト設定は名前空間options.layoutに渡されます。 グローバルオプションはChart.defaults.global.layoutで定義されています。

padding

数値を指定した場合、チャートの全ての辺(left、right、top、bottom)にpaddingを設定します。 オブジェクトを指定した場合、leftプロパティを指定すると左のpaddingを設定します。 right、top、bottomも同様です。

チャートの左側に50pxのpaddingを指定する場合は、以下のように指定します。

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: {
                left: 50,
                right: 0,
                top: 0,
                bottom: 0
            }
        }
    }
});

デモ

チャートの左側に50pxのpaddingを指定しています。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        }]
    },
    options: {
        layout: {
            padding: {
                left: 50,
                right: 0,
                top: 0,
                bottom: 0
            }
        }
    }
});

HTML

<canvas id="myChart"></canvas>