title: Stacked Column Annotations Google Charts
body: <p>While creating a stacked column chart using google charts, the annotations are getting overlapped due to large amount data. Is there anyway to get it adjusted. Like displaying only for every 3rd column. I know this concept works fine with highcharts but I was looking for free charts.</p>
  
  <p><a href="https://i.stack.imgur.com/hwmeC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hwmeC.png" alt="enter image description here"></a></p>
  
  <p>Annotation function call is :--</p>
  
  <pre><code>    function drawVisualization() {
      var json;
      $.getJSON('end.json', function (json) {
  
      var data = new google.visualization.DataTable();
          data.addColumn('string', 'Time');
          data.addColumn('number', 'Run 3');
          data.addColumn({ type: 'number', role: 'annotation' });
          data.addColumn('number', 'Run 2');
          data.addColumn({ type: 'number', role: 'annotation' });
          data.addColumn('number', 'Run 1');
          data.addColumn({ type: 'number', role: 'annotation' });
          for (var i = 0; i&lt; json[0].data.length; i++){
              data.addRow([json[0].data[i], json[3].data[i],json[3].data[i],json[2].data[i],json[2].data[i],json[1].data[i], json[1].data[i]]);
          }
  
  
   var options = {
   title: "End to End Processing",
   tooltip: {isHtml: true},
   legend:{position:"right"},
   isStacked:true,
   height:window.innerHeight,
   width: window.innerWidth,
   bar: {groupWidth: '3'},
  
   focusTarget: 'category',
   vAxis: {
          viewWindowMode:'explicit',
              viewWindow: {
                      max:60,
                      min:0
              },
              gridlines :{count:6},
              title:'Time in mins',
              format: 'short' 
          },
      hAxis: {
              format: 'd/m/y', 
              textStyle : {
              fontSize: 9  
              },
              slantedText: true, 
              slantedTextAngle: 270
      },
      annotations: {
              textStyle: {
                  color: 'black',
                  fontSize: 11,
                  fontStyle: 'bold'
                  },
               stemLength: 20,
              displayAnnotationsFilter: true,
              legendPosition: 'newRow'
      },
       series: {
          0:{color:'lightgreen'},
          1:{color:'black'},
          2:{color:'#1E90FF',},
          3:{ type: 'line', lineWidth: 0, visibleInLegend:false, pointSize: 0}
      }
  }
  
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
  });
  
  $(window).resize(function(){
  drawVisualization();
  });
  } 
  </code></pre>
  
  <p>Regards.</p>