vue-chartjsのexamplesをTypeScript対応で試してみた時のはなし

vue-chartjsのexamplesを試してみたが、typeScript対応の場合に追加しないといけない設定があったので、残しておく。

https://vue-chartjs.org/examples/#vue-3-charts

確認環境

• chart.js 4.2.1
• vue-chartjs 5.2.0
• typescript 4.7.4
• vue 3.2.45
• docker desktop 4.16.2
• macOS 13.2

追加対応した内容

ChartData型が見つからない警告が出るので、

const barChartWithReactiveData = ref<ChartData<"bar">>({
  datasets: [],
});

import文を追加した

import type { ChartData } from "chart.js/auto";

Examples の「Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter, Bar with reactive data」を表示させてみた。