Reactive Vue.js Wrapper For Google Charts – GChart

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
}

Preview:

Changelog:

v1.1.0 (05/30/2022)

• add is-first-row-labels prop for convert data array to data table

v1.0.0 (05/17/2022)

• Vue 3 support.

v0.4.0 (05/05/2022)

• Vue 3 support.

v0.3.2 (04/20/2022)

• Update

Download Details:

Author: devstark-com

Live Demo: https://codesandbox.io/embed/z699l6oq4p?module=%2Fsrc%2FApp.vue

Download Link: https://github.com/devstark-com/vue-google-charts/archive/master.zip

Official Website: https://github.com/devstark-com/vue-google-charts

Install & Download:

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