title: Annotation on stacked Google Charts using <google.charts.Bar> and <series> option
body: <p>Does anyone know if it is even possible to add <em>annotation</em> on a chart created with the function <em>google.charts.Bar</em>?</p>
  
  <p>The reason I am using <em>google.charts.Bar</em> instead of <em>google.visualization.ColumnChart</em> is that I need to have multiple stacked columns for each period.</p>
  
  <p><img src="https://i.stack.imgur.com/lydb2.png" alt="enter image description here"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>google.load("visualization", "1", {
    packages: ["corechart", "bar", "table"]
  });
  google.setOnLoadCallback(drawChart);
  
  function drawChart() {
  
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Period');
    data.addColumn('number', 'AHMA PS');
    data.addColumn('number', 'Others PS');
    data.addColumn('number', 'AHMA AB');
    data.addColumn('number', 'Others AB');
    data.addColumn('number', 'AHMA CC');
    data.addColumn('number', 'Others CC');
  
    data.addRows([
      ['Apr', 30, 50, 10, 60, 2, 40],
      ['Mar', 30, 2, 10, 60, 2, 40],
      ['Feb', 30, 50, 10, 60, 2, 40],
      ['Jan', 30, 50, 10, 60, 2, 40]
    ]);
  
    var view = new google.visualization.DataView(data);
  
    view.setColumns([0, 1, {
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
      },
      2, {
        calc: "stringify",
        sourceColumn: 2,
        type: "string",
        role: "annotation"
      },
      3, {
        calc: "stringify",
        sourceColumn: 3,
        type: "string",
        role: "annotation"
      },
      4, {
        calc: "stringify",
        sourceColumn: 4,
        type: "string",
        role: "annotation"
      },
      5, {
        calc: "stringify",
        sourceColumn: 5,
        type: "string",
        role: "annotation"
      },
      6, {
        calc: "stringify",
        sourceColumn: 6,
        type: "string",
        role: "annotation"
      }
    ]);
  
    var options = {
      isStacked: true,
      series: {
        2: {
          targetAxisIndex: 1
        },
        3: {
          targetAxisIndex: 1
        },
        4: {
          targetAxisIndex: 2
        },
        5: {
          targetAxisIndex: 2
        }
      },
      vAxis: {
        viewWindow: {
          min: 0,
          max: 100
        }
      }
    };
    var chart = new google.charts.Bar(document.getElementById('google-chart'));
    chart.draw(view, google.charts.Bar.convertOptions(options));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  
  &lt;div id="google-chart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>