vue.jsgchart

Pass title to gchart with VueJS


I'm trying to use vue-google-chart library to draw graphs.

I'm using the following code for the component:

Vue.component('graph', {
template: '<GChart type="AreaChart" :data="chartData" :options="chartOptions"/>',
props: ['data', 'options'],
data() {
   return {
     chartData: null,
     chartOptions: {
        title: '',
        curveType: 'function',
        height: 500,
        pointSize: 10,
      }
   }
},

watch: {
   data: {
     immediate: false,
     handler(newValue) {
        this.chartData = newValue;
        }
   }
}
});

When creating the component in html, I use:

<graph :data="datag"></graph>

How do I pass the title as argument when creating the component in html to update the default empty title defined in the component?

Thanks in advance!


Solution

  • define it as prop and define chartOptions as computed property which takes the prop title as value of title field :

    <graph :data="datag" title="the chart title"></graph>
    

    the component :

    Vue.component('graph', {
    template: '<GChart type="AreaChart" :data="chartData" :options="chartOptions"/>',
    props: ['data', 'options','title'],
    data() {
       return {
         chartData: null,
          
       }
    },
    computed:{
      chartOptions(){
        return {
            title: this.title,
            curveType: 'function',
            height: 500,
            pointSize: 10,
          }
      }
    },
    watch: {
       data: {
         immediate: false,
         handler(newValue) {
            this.chartData = newValue;
            }
       }
    }
    });