Chart.jsのscales optionsの書き方が変わっていたのでメモ

Chart.jsを使ってグラフを描くにあたってグラフのオプションの書き方が以前（v2）と変わっていてつまずいたので備忘録。

公式ドキュメント

ここみたらちゃんと書いてある。
https://www.chartjs.org/docs/master/axes/

@seeに記載されているここもoptionsだけどgeneralのことしか書いてない。（使うときは一緒に入れて渡す）
https://www.chartjs.org/docs/latest/general/options.html

環境

package.json

"chart.js": "^3.7.0",
"react-chartjs-2": "^4.0.1",

全部入りサンプル

Graph.tsx

export const options = {
  responsive: true,
  plugins: {
    legend: {
      display: false,
    },
    title: {
      display: false,
    },
  },
  scales: {
    xAxis: {
      type: "time" as "timeseries",
      alignToPixels: false,
      backgroundColor: "rbga(10,10,10,0.3)",
      display: "auto" as boolean | "auto",
      grid: {
        borderColor: "rbga(10,10,10,0.3)",
        borderWidth: 1,
        borderDash: [10, 5],
        borderDashOffset: 0.0,
        circular: false,
        color: "#666",
        display: true,
        drawBorder: true,
        drawOnChartArea: true,
        drawTicks: true,
        lineWidth: 1,
        offset: false,
        tickBorderDash: [20, 5],
        tickBorderDashOffset: 0.0,
        tickColor: "#666",
        tickLength: 8,
        tickWidth: 1,
        z: 0,
      },
      ticks: {
        backdropColor: "#000",
        backdropPadding: 2,
        callback: (value: number) => {
          if (value === 1) {
            return "S";
          } else if (value === 2) {
            return "M";
          } else if (value === 3) {
            return "L";
          }
          return null;
        },
        display: true,
        color: "#666",
        font: {
          size: 16,
          family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
          style: "normal" as
            | "italic"
            | "normal"
            | "oblique"
            | "initial"
            | "inherit",
          weight: "undefined",
          lineHeight: 1.2,
        },
      },
    },
    y: {}, // x, yだけでも大丈夫だけれど`position`や`axis`を明示することを推奨
  },
};

変わってたところ

scales.xAxis が配列じゃない

v2

  scales: {
    xAxes: [{
      display: false,
    }],
  },

v3

  scales: {
    xAxis: {
      display: false,
    },
  },

scales.x.gridLines → scales.x.grid

中身もすこしだけ変わっている。z-indexとか指定できる。

scales.x.ticks.beginAtZero, scales.x.ticks.stepSize はない

目盛がいらないところはscales.x.ticks.callbackを使ってnullまたはundefinedを返す。

Graph.tsx

export const options = {
  scales: {
    yAxis: {
      ticks: {
        callback: (value: number) => {
          if (value === 1) {
            return "S";
          } else if (value === 2) {
            return "M";
          } else if (value === 3) {
            return "L";
          }
          return null;
        },
      },
    },
  },
};