More than 3 years have passed since last update.

Chart.js 3系と2系のオプションの違い 2021/9/21

Posted at 2021-09-20

Chart.jsは2系と3系で大きくオプションが変わっているそうで、昔の記事からコードをコピペすると全然上手く動きません。
ということで、Chart.js3系を使ってみて2系からの違いをまとめていこうと思います！

基本は以下のドキュメントに記載されていますが、サンプルコードが無いので分かりづらい。
https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

title

2系

title: {
  display: true,
  text: "Chart Title",
}

3系
いくつかのオプションはpluginsの中に入れるようになりました。

plugins: {
  title: {
    display: true,
    text: "Chart Title",
  }
}

2系

legend: {
  display: false
}

3系
いくつかのオプションはpluginsの中に入れるようになりました。

plugins: {
  legend: {
    display: false
  }
}

2系

scale :{
  ticks: {
    beginAtZero: true,
    stepSize: 50,
    fontSize: 20,
  },
}

3系
scaleという設定値が削除され、scales[r]の形式で表されるようになったそうです。

  scales: {
    r: {
      ticks: {
        beginAtZero: true,
        stepSize: 50,
        font: {
          size: 20,
        },
      },
    },