CODEWITHSUNDEEP
javascriptvue.js
Sam
Sam

Reputation: 2425

Vue - Calendar chart is not working in vue-google-charts

I am using vue-google-charts package to display google charts, but unable to use Calendar chart in it.

HTML Template:

<GChart
  type="CalendarChart"
  :data="chartData"
  :options="chartOptions"
/>

Script:

<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,
   }
  }
};
}
};

It shows this error

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)

How to fix this issue? Thank you.

Upvotes: 0

Views: 843

Answers (1)

Sam
Sam

Reputation: 2425

There seems to be :settings property to chart. Its working with that.

<GChart
  :settings="{packages: ['calendar']}"
  type="Calendar"
  :data="chartData"
  :options="chartOptions"
/>

Upvotes: 1

Related Questions