【Chart.js】軸のラベルを表示・非表示する方法

チャートのx軸ラベル・y軸ラベルはそれぞれ表示・非表示を設定することができます。

表示させる為には、それぞれ以下のように設定する必要があります。

y軸のラベルの表示・非表示

options -> scales(軸の設定)の中のyAxesで設定します。

デフォルトは非表示になっているので、ラベルを表示させたい場合は display: trueに設定し、labelStringにラベル名を設定しましょう。

※ scaleLabelは軸の設定です。

コード

const chartjs = new Chart(ctx, {
  type: "line",
  data: data,
  options {
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true, // ラベルの表示・非表示
          labelString: 'y軸ラベル文字',
        },
      }]
    }
  }
})

x軸のラベルの表示・非表示

options -> scales(軸の設定)の中のxAxesで設定します。

デフォルトは非表示になっているので、ラベルを表示させたい場合は display: trueに設定し、labelStringにラベル名を設定しましょう。

コード

const chartjs = new Chart(ctx, {
  type: "line",
  data: data,
  options {
    scales: {
      xAxes: [{
        scaleLabel: {
          display: true, // ラベルの表示・非表示
          labelString: 'x軸ラベル文字',
        },
      }]
    }
  }
})