I am trying to utilize the vue-google-charts package for displaying Google charts, but I'm encountering difficulties when attempting to incorporate the Calendar chart.
This is how my HTML template looks:
<GChart
type="CalendarChart"
:data="chartData"
:options="chartOptions"
/>
Here is my script setup:
<script>
import { GChart } from "vue-google-charts";
export default {
name: "App",
components: {
GChart
},
data() {
return {
chartData: [
['a','b'],
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ]
],
chartOptions: {
chart: {
title: "Red Sox Attendance",
height: 350,
}
}
};
}
};
The error message I receive is:
Uncaught (in promise) TypeError: chartsLib.visualization[this.type] is not a constructor
at VueComponent.createChartObject (vue-google-charts.common.js:1)
at eval (vue-google-charts.common.js:1)
What steps can I take to address this issue? Thank you.