nuxt.jsでchart.jsを使ってのグラフ表示ができない

Question

前提・実現したいこと

nuxt.jsで開発を行っており、chart.jsを使って棒グラフの表示をしたいと思っています。

発生している問題

chart.jsをインストール後、下のコードを記述してグラフを表示させようとした所、
以下の2つのエラーが発生し、表示することができなくなっております。
自分なりには調べてみたのですが、原因がわからず、ご教授頂けると幸いです。

client.js?06a0:97 TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
    at VueComponent.renderChart (BaseCharts.js?86fc:62)
    at VueComponent.mounted (vue-chartjs.js?6280:15)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)

./node_modules/vue-chartjs/es/BaseCharts.js 62:32-37"export 'default' (imported as 'Chart') was not found in 'chart.js'

開発環境

インストールバージョン
"nuxt": "^2.0.0"
"chart.js": "^3.0.2"
"vue-chartjs": "^3.5.1"

## nuxt.config.js

export default {
~~~~
~~~~
  plugins: [
    { src: "@/plugins/vue-chartjs.js", ssr: false },
  ]
}

## plugins/vue-chart.js

import Vue from "vue"
import { Bar, mixins } from "vue-chartjs"
const { reactiveProp } = mixins

Vue.component("BarChart", {
  extends: Bar,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    this.renderChart(this.chartData, this.options)
  },
})

## components/Chart.vue

<template>
  <div>
    <BarChart :chart-data="chartData" :options="chartOptions" />
    <div class="text-xs-center mt-2">
      <v-btn dark color="indigo" @click="randomizeData()">Randomize data
    </v-btn>
  </div>
</template>

<script>
import colors from "vuetify/es5/util/colors"

export default {
  data() {
    return {
      chartDataValues: [],
      chartColors: [
        colors.red.lighten1,
        colors.blue.lighten1,
        colors.yellow.lighten1,
        colors.green.lighten1,
      ],
      chartLabels: ["red", "blue", "yellow", "green"],
      chartOptions: {
        maintainAspectRatio: false,
        animation: {
          duration: 1500,
          easing: "easeInOutCubic",
        },
      },
    }
  },
  computed: {
    chartData() {
      return {
        datasets: [
          {
            data: this.chartDataValues,
            backgroundColor: this.chartColors,
          },
        ],
        labels: this.chartLabels,
      }
    },
  },
  methods: {
    randomizeData: function () {
      var data = []
      for (var i = 0; i < this.chartLabels.length; i++) {
        data.push(Math.floor(Math.random() * 100))
      }
      this.chartDataValues = data
    },
  },
}
</script>

試したこと

1個めのエラーは調べてみましたが、解決方法が見つかず。
2個めのエラーからimport Chart from "chart.js"の記述をしてみたが特に変わりませんでした。

Answer 1

chart.jsの3.0以上のバージョンだとvue-chartjsがまだサポートされていなかったのが原因でした。
chart.jsのバージョンを3.0.2から2.9.4にダウングレードしたところ表示できるようになりました。
解決にいたった記事