google.visualization[type] is not a constructor Donut Chart

[developcreativo]

Error:

Uncaught (in promise) TypeError: google.visualization[type] is not a constructor
    at createChart (app.js?1126288863:197256)
    at VueComponent.createChartObject (app.js?1126288863:197256)
    at app.js?1126288863:197256

My Component

<template>
  <div id="app">
    <GChart type="DonutChart" :data="chartData" :options="chartOptions" />
  </div>
</template>

<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart,
  },
  data() {
    return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      chartData: [
        ["Task", "Hours per Day"],
        ["Work", 11],
        ["Eat", 2],
        ["Commute", 2],
        ["Watch TV", 2],
        ["Sleep", 7],
      ],
      chartOptions: {
        chart: {
          title: "Company Performance",
          subtitle: "Sales, Expenses, and Profit: 2014-2017",
        },
      },
    };
  },
};
</script>

[mrodal]

Check this issue: #88

And by looking at this: https://developers.google.com/chart/interactive/docs/gallery/piechart#donut

Looks like instead of geochart you should include corechart

So in sum, try this:

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

[Fahme]

There's no DonutChart type it's basically a pie chart with pieHole option.

<template>
  <GChart type="PieChart" :data="chartData" :options="chartOptions" :settings="{packages: ['corechart']}" />
</template>

<script>
import {GChart} from 'vue-google-charts'
export default {
  name: 'App',
  components: {
    GChart
  },
  data() {
    return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      chartData: [
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ],
      chartOptions: {
        pieHole: 0.4,
        chart: {
          title: 'Company Performance'
        }
      }
    }
  }
}
</script>

Try this should work