パディング

Chartオプションのパディング値は、いくつかの異なる形式で指定できます。

数値

この値が数値の場合、すべての方向（左、上、右、下）に適用されます。

たとえば、チャートのすべての方向に20pxのパディングを定義する例です。

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: 20
        }
    }
});

{top, left, bottom, right} オブジェクト

この値がオブジェクトの場合、`left` プロパティは左のパディングを定義します。同様に、`right`、`top`、`bottom` プロパティも指定できます。省略されたプロパティはデフォルトで `0` になります。

チャートキャンバスの左側に50pxのパディングを追加する場合、次のようにします。

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

{x, y} オブジェクト

これは、左右と上下に同じ値を定義するための省略形です。

たとえば、放射状線形軸の目盛りの背景パディングに左右10px、上下4pxのパディングを設定する例です 目盛りの背景パディング

let chart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: {
        scales: {
          r: {
            ticks: {
              backdropPadding: {
                  x: 10,
                  y: 4
              }
            }
        }
    }
});