vue-chartjsで折れ線グラフを描画する

# 経緯

Vue3に対応したグラフ描画のライブラリを探していたところ、vue-chartjsに行き着いた。
ドキュメントを参考に進めても折れ線グラフの描画に関する内容が分かりづらかった。
Vueでimportする内容等を備忘として残しておく。

# インストール

 npm i vue-chartjs chart.js

# サンプル

labelsやdatasetsは動的になるようにすればよいかと思います。
公式のだと、このあたりのサンプルが参考になるかもしれません。

import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
  Plugin
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement)

export default {
  name: 'LineChart',
  components: { Line },
  data () {
    return {
      chartData: {
        labels: [
          '2022/08/15',
          '2022/08/16',
          '2022/08/17',
          '2022/08/18',
          '2022/08/19',
          '2022/08/20',
          '2022/08/21',
        ],
        datasets: [
          {
            label: '商品A',
            backgroundColor: '#f87979',
            borderColor: '#FFFFFF',
            data: [500000, 490000, 390000, 800000, 790000, 1000000, 1000001],
          },
          {
            label: '商品B',
            backgroundColor: '#289979',
            borderColor: '#FFFFFF',
            data: [50200, 49200, 39200, 80200, 79200, 102000, 102000],
          }
        ],
      },
      options: {
        responsive: true
      }
    }
  },
}

こんな感じで表示されます。