Can't add annotation to google bar chart

Question

I've been trying to add annotations to google bar chart. I've seen related questions about this, but can't solve it. There are 2 bar in charts and i want to show numbers on bars. I added 2 annotation column to my datatable. Chart draw works without annotations and there is no error at console. So i need some help. Here is my code:

 var options = {
        chart: {
            title: 'xxxx',
            subtitle: 'xxxx',
            focusTarget:'category'
        },
        annotations: {
            textStyle: {
                color: 'black',
                fontSize: 11,
            },
            alwaysOutside: true
        },
        height:300,
        vAxis: {format: 'short'},
        colors: ['#17807E', '#4285F4']
    };  

function drawAudits(Data)  //data comes from another function with ajax call
    {            
        var dataTbl = new google.visualization.DataTable();            
        dataTbl.addColumn('string', 'Months');            
        dataTbl.addColumn('number', 'Scheduled');
        dataTbl.addColumn('number', 'Done');
        dataTbl.addColumn({ type:'number' , role: 'annotation' });
        dataTbl.addColumn({ type:'number' , role: 'annotation' });

        for (var i = 0; i < Data.length; i++)
        {
            dataTbl.addRow([Data[i].month, Data[i].AllAudits, Data[i].DoneAudits, Data[i].AllAudits, Data[i].DoneAudits]);
        } //last 2 column for annotations

        var chart = new google.charts.Bar(document.getElementById('columnChartDiv'));
        chart.draw(dataTbl,options);
    }

thanks in advance.

WhiteHat WhiteHat · Accepted Answer · 2017-03-03T12:46:08

annotations.* are not supported by Material charts, along with several other options...

see --> Tracking Issue for Material Chart Feature Parity #2143

the following option will style Core charts, similar to Material...

theme: 'material'

note: the annotation column should directly follow the series it represents...

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var options = {
      annotations: {
        textStyle: {
          color: 'black',
          fontSize: 11,
        },
        alwaysOutside: true
      },
      chartArea: {
        left: 36,
        width: '100%'
      },
      colors: ['#17807E', '#4285F4'],
      focusTarget:'category',
      height:300,
      legend: {
        position: 'bottom'
      },
      theme: 'material',
      title: 'xxxx',
      vAxis: {
        format: 'short',
        viewWindow: {
          max: 12
        }
      },
    };

    drawAudits();
    window.addEventListener('resize', drawAudits, false);

    function drawAudits(Data) {
      var dataTbl = new google.visualization.DataTable();
      dataTbl.addColumn('string', 'Months');
      dataTbl.addColumn('number', 'Scheduled');
      dataTbl.addColumn({ type:'number' , role: 'annotation' });
      dataTbl.addColumn('number', 'Done');
      dataTbl.addColumn({ type:'number' , role: 'annotation' });

      Data = [
        {month: 'Jan', AllAudits: 10, DoneAudits: 5},
        {month: 'Feb', AllAudits: 10, DoneAudits: 6}
      ];

      for (var i = 0; i < Data.length; i++) {
        dataTbl.addRow([Data[i].month, Data[i].AllAudits, Data[i].AllAudits, Data[i].DoneAudits, Data[i].DoneAudits]);
      }

      var chart = new google.visualization.ColumnChart(document.getElementById('columnChartDiv'));
      chart.draw(dataTbl,options);
    }
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnChartDiv"></div>

Can't add annotation to google bar chart

1 Answers