Reactive Vue.js Wrapper For Google Charts - GChart

Install & Download:

# NPM
$ npm install vue-google-charts --save

Description:

The GChart component is a Vue.js wrapper for the original Google Charts that features reactive data binding. A chart will be redrawn automatically once the data, type, and options prop is changed.

How to use it:

1. Import and register the GChart component.

// globally
import Vue from 'vue'
import VueGoogleCharts from 'vue-google-charts'
Vue.use(VueGoogleCharts)

// or locally
import { GChart } from 'vue-google-charts'
export default {
  components: {
    GChart
  }
}

2. Add the GChart component to the app and determine the chart type you want to use.

<GChart
  type="ColumnChart"
  :data="myData"
  :options="myOptions"
/>

export default {
  data () {
    return {
      chartData: [
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2018', 1000, 400, 200],
        ['2019', 1170, 460, 250],
        ['2020', 660, 1120, 300],
        ['2021', 1030, 540, 350]
      ],
      chartOptions: {
        chart: {
          title: 'Chart Title',
          subtitle: 'Sub Title',
        }
      }
    }
  }
}

3. Default component props.

type: {
  type: String,
  required: true
},
data: {
  type: [Array, Object],
  default: () => []
},
options: {
  type: Object,
  default: () => ({})
},
version: {
  type: String,
  default: 'current'
},
// https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
settings: {
  type: Object,
  default: () => ({
    packages: ['corechart', 'table']
  })
},
events: {
  type: Object,
  default: () => ({})
},
createChart: {
  type: Function,
  default: () => ({})
},
resizeDebounce: {
  type: Number,
  default: 200
}