Zenn
Open2

react-chartjs-2+typescriptでoptionsの型エラー解決tips

React
TypeScript
Chart.js
kage1020kage1020

react-chartjs-2をtypescriptで書いていた時，チャートに渡すoptionsの中で

型 'string' を型 '"bottom" | "center" | "left" | "right" | "top" | "chartArea" | _DeepPartialObject<{ [scaleId: string]: number; }> | undefined' に割り当てることはできません。

と怒られたのでその解決策をメモしときます．

kage1020kage1020

Chart.jsはパッケージ内にtypesを同梱しているので，chart.jsからChartOptionsの型定義をインポートして直接型を指定してあげればエラーが消えます．

const options: ChartOptions<'bar'> = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
  },
};
return <Bar data={datasets} options={options} />;

ついでにdataの方もChartDataを当ててあげるといいです．