Zenn
🔥

react-chartjs-2 x軸を日時にしようとしてハマった件

2022/12/11に公開
React
Chart.js
tech

要点

  • 棒グラフ(Chart, Bar)はダメ。散布図(Scatter)を選択する。
  • 用意する data は [{ x: datetime1, y: val1 },{x: datetime2, y: val2 },...] の構造。
  • 上記datetime変数には new Date() のオブジェクトまま渡してOK。
  • options には下記を設定。"time" is not a registered scale.と言われるので、必ずTimeScaleをインストールしておく。
import { TimeScale } from "chart.js";

ChartJS.register(
	...
	TimeScale,
);
	
const options = {
    scales: {
	x: {
	    display: true,
	    type: 'time',
	    time: {
		unit: 'year',
	    }
	}
    }
}

return <Scatter options={options} data={graphData} />;
  • Uncaught Error: This method is not implemented: either no adapter can be found or an incomplete integration was providedが出るので、npm にて下記インストール。ソースTOPにimport文を追加する。
npm install moment chartjs-adapter-moment --save

import 'chartjs-adapter-moment';
  • 以上。

参考

Discussion