title: Google Visualization - annotations position
body: <p>I'm using Google visualization stacked bars chart to show a lot of information of my process.</p>
  
  <p>I am trying to do three things necessary to correctly display information.</p>
  
  <p>1) Show the total at the top of the column;
  2) When the total value of the column does not fit in the bar, it is next to it, allowing the reading of all items.
  3) Display a companion line that will show the total of impacted records (not present in the chart currently)</p>
  
  <p>My necessity:
  <a href="https://i.stack.imgur.com/K3yEB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K3yEB.jpg" alt="enter image description here"></a>
  I have "L. ratio" for each column, bur the value isn't in the chart.</p>
  
  <p>What I've Done:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>google.charts.load('current', {packages: ['corechart', 'bar']});
  google.charts.setOnLoadCallback(drawStacked);
  
  function drawStacked() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'week');
        data.addColumn('number', 'L0');
        data.addColumn('number', 'L1');
        data.addColumn('number', 'L2');
        data.addColumn('number', 'L3');
        data.addColumn('number', 'L4');
        data.addColumn('number', 'L5');
  
        data.addRows([
          ['W1', 15, 0, 0, 0, 0, 0],
          ['W2', 75, 60, 20, 0, 0, 0],
          ['W3', 133, 90, 35, 21, 0, 0],
          ['W4', 95, 110, 23, 28, 13, 2],
          ['W5', 83, 80, 60, 40, 20, 15]
          /*[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
          [{v: [13, 0, 0], f: '1 pm'}, 6, 3],
          [{v: [14, 0, 0], f: '2 pm'}, 7, 4],
          [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
          [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
          [{v: [17, 0, 0], f: '5 pm'}, 10, 10],*/
        ]);
        
        var view = new google.visualization.DataView(data);
        
        view.setColumns([0,
          1, {
            calc: function (dt, row) {
              return dt.getValue(row, 1);
            },
            type: "number",
            role: "annotation"
          },
          2, {
            calc: function (dt, row) {
              return dt.getValue(row, 2);
            },
            type: "number",
            role: "annotation"
          },
          3, {
            calc: function (dt, row) {
              return dt.getValue(row, 3);
            },
            type: "number",
            role: "annotation"
          },
          4, {
            calc: function (dt, row) {
              return dt.getValue(row, 4);
            },
            type: "number",
            role: "annotation"
          },
          5, {
            calc: function (dt, row) {
              return dt.getValue(row, 5);
            },
            type: "number",
            role: "annotation"
          },
          6, {
            calc: function (dt, row) {
              return dt.getValue(row, 5);
            },
            type: "number",
            role: "annotation"
          },
          {
            calc: function (dt, row) {
              return 0;
            },
            label: "Total",
            type: "number",
          },
          {
            calc: function (dt, row) {
              return dt.getValue(row, 1) + dt.getValue(row, 2) + 
                   dt.getValue(row, 3) + dt.getValue(row, 4) + 
                     dt.getValue(row, 5);
            },
            type: "number",
            role: "annotation"
          }
        ]);
  
        var options = {
          //title: 'Motivation and Energy Level Throughout the Day',
          animation:{
            duration: 1000,
            easing: 'out',
            startup: true
          },
          legend: {
            position: 'rigth'
            //maxLines: 3
          },
          series: {
            6: {
              annotations: {
              alwaysOutside: true,
                stem: {
                  color: "transparent",
                },
                textStyle: {
                  color: "#000000",
                }
              },
              enableInteractivity: true,
              tooltip: "none",
              visibleInLegend: false,
              axisTitlesPosition: 'in'
            }
          },
          isStacked: true,
          vAxis: {
            //title: 'Rating (scale of 1-10)',
            viewWindow: {
              max: 600
            }
          }
        };
  
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(view, options);
      };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
    &lt;div id="chart_div"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>