Vue JS Google chart annotation

Question

I would like to create a barChart using Vue-Google-charts where values are displayed on bars. If I read the google charts documentation, I should use annotations.

How do I put annotations in Vue-Google-Chart component code ?

Here is my current component code:

Vue.component('graphiquecolonne', {
template: '<GChart type="BarChart" :data="chartData2" :options="chartOptions2"/>',
props: ['datag2', 'titre'],
data() {
   return {
     chartData2: null
   }
},
computed:{
  chartOptions2(){
    return {
        title: this.titre,   
        height: 500,
        pointSize: 10,
      }
  }
},
watch: {
   datag2: {
     immediate: false,
     handler(newValue) {
        this.chartData2 = newValue;
        }
   }
}
});

My data is in "datag2" object (prop) with currently label and value.

Thanks in advance!

Answer 1

you have to provide the column role, in the column headings for the data table.

if the following are your column headings...

['datag2', 'titre']

then you would add the annotation column role, after the data column that should have the annotations...

['datag2', 'titre', {role: 'annotation', type: 'string'}]

then provide the annotation value in the data rows...

[
  ['category 1', 10, '10'],
  ['category 2', 20, '20'],
  ['category 3', 30, '30'],
]