How to bring the annotation part into bottom in google charts?

Question

I am using google chart. I want to show the annotation part in bottom of the graph, but the default is in top. How can I change it. Please share with me if anyone have any idea.

Jsfiddle: http://jsfiddle.net/6a9hpewr/

My code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Funds');
dataTable.addColumn('number', 'Percentage');
dataTable.addColumn({type: 'string', role: 'annotation'});


dataTable.addRows([
['AB1', 30.6, '30.6%'],

['AB2', 40.1,'40.1%'],

['AB3', 45.7,'45.7%'],

['AB4', 50.9,'50.9%']
]);


var options = {
title: 'ABCD',
hAxis: {title: 'List of AB', titleTextStyle: {color: 'black'}},
vAxis: {title: 'List of CD', titleTextStyle: {color: 'black'},           gridlines: {color: 'red', count: 4}, minValue: 0},    
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('tooltip'));
chart.draw(dataTable, options);
}

</script>
<div id="tooltip" style="width: 600px; height: 400px;"></div>

Default:

Need:

Answer 1

Check this disscussion https://groups.google.com/forum/#!topic/google-visualization-api/1yWwsXV-Ysk. According to that

1.Create a stacked bar chart

2.Add a data column with value 0 to the view which will be shown as a 0 height bar.

3.Next add the annotation column to the view so the annoation will be shown near previous bar which has 0 height.

Updated fiddle:http://jsfiddle.net/6a9hpewr/7/

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Funds');
  dataTable.addColumn('number', 'Percentage');
  dataTable.addColumn({type: 'string', role: 'annotation'});


    var view = new google.visualization.DataView(dataTable);
    view.setColumns([0, 1, {
        type: 'number',
        calc: function (dt, row) {
            return 0;
        }
    },2]);


  dataTable.addRows([
    ['AB1', 30.6, '30.6%'],

    ['AB2', 40.1,'40.1%'],

    ['AB3', 45.7,'45.7%'],

    ['AB4', 50.9,'50.9%']
  ]);


  var options = {
    title: 'ABCD',
    hAxis: {title: 'List of AB', titleTextStyle: {color: 'black'},
         textStyle: {
        fontName: 'Times-Roman',
        //fontSize: 20,
        // bold: true,
        // italic: true,
        // color: '#BDBDBD',     // The color of the text.
        //opacity: 0.8          // The transparency of the text.
        }},
    vAxis: {title: 'List of CD', titleTextStyle: {color: 'black'},           gridlines: {color: 'red', count: 4}, minValue: 0},    
    legend: 'none',
        isStacked: true,
        annotations: {
          textStyle: {
        //fontName: 'Times-Roman',
        // fontSize: 18,
        // bold: true,
        // italic: true,
          color: '#fff',     // The color of the text.
          auraColor: 'transparent', // The color of the text outline.
        //opacity: 0.8          // The transparency of the text.
        }
}

  };
  var chart = new google.visualization.ColumnChart(document.getElementById('tooltip'));
  chart.draw(view, options);
}

    </script>
<div id="tooltip" style="width: 600px; height: 400px;"></div>