[Vuejs]-How to create a google line chart using vue-google-charts wrapper in Vue.js?

by

2👍

For me chartOptions don’t work if you put the options inside a chart:{} property, I needed to add the options directly inside chartOptions

This worked for me

chartOptions: {
  width: 400,
  height: 200,
  title: "Hourly Page views"
}
👤PrestonDocks

1👍

Here is how.
Note: Please notice the GChart type it is “LineChart”. The chartData is same as the official example of the column chart here

<template lang="html">
  <div class="component-wrapper">
    <GChart
       type="LineChart"
       :data="chartData"
       :options="chartOptions"
      />
  </div>
</template>
<script>
import { GChart } from 'vue-google-charts'
export default {
  data () {
    return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      chartData: [
        ['Gün', 'Harcama', 'Expenses', 'Profit'],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
      ],
      chartOptions: {
        chart: {
          title: 'Company Performance',
          subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        }
      }
    }
  },
  components: {
    GChart
  }

}
</script>
👤Suat Atan PhD

Leave a comment