Google Chart, how to move annotation on top of columns -

i'm using google chart's stacked column chart, wanna achieve display total on top of each column , i'm using annotation this. @ image, somehow annotation on 5th column (1,307.20) working expected.

as investigate , seem bug of google chart , bug can explained below

[[date, car, motobike, {role: :annotation}], [june 2015, 500, 0, 500], [feb 2015, 500, 600, 1100]] [march 2015, 700, 0, 700], 

with above data, annotation feb 2015 displayed correctly , other 2 not since last value of 0 , when change last value 1 june , march , annotation displayed correctly.

then think of work around display "non-zero" data on top , , here's result:

the annotations moved on top , can see, it's located within column , want achieve move on top of column .

i'm stuck while , google documentation doesn't case. highly appreciated

i had same problem, of series had 0 last value label show on x axis instead of @ top. dynamic data real challenge ensure last value never 0. @dlaliberte gave me hint start comment:

"as workaround, might consider using combochart series draw point @ top of each column stack. you'll have compute total of other series know put each point."

i found combo chart google's gallery , opened jsfiddle see do. left data mostly, changed series name labels , made numbers little simpler. don't caught on purpose of graph data regardless, wanted figure out how annotation top of graph when last column 0 (https://jsfiddle.net/l5wc8rcp/1/):

function drawvisualization() {     // raw data (not accurate)     var data = google.visualization.arraytodatatable([         ['month', 'bolivia', 'ecuador', 'madagascar', 'papua new guinea', 'rwanda', 'total', {type: 'number', role: 'annotation'}],         ['application', 5, 2, 2, 8, 0, 17, 17],         ['friend', 4, 3, 5, 6, 2, 20, 20],         ['newspaper', 6, 1, 0, 2, 0, 9, 9],         ['radio', 8, 0, 8, 1, 1, 18, 18],         ['no referral', 2, 2, 3, 0, 6, 13, 13]     ]);      var options = {         isstacked: true,         title : 'monthly coffee production country',         vaxis: {title: 'cups'},         haxis: {title: 'month'},         seriestype: 'bars',         series: {5: {type: 'line'}},     };      var chart = new google.visualization.combochart(document.getelementbyid('chart_div'));     chart.draw(data, options); } 

that produced graph, great start:

as can see since series 5 (our total of other series) type: 'line', point top of stack. now, didn't want line in chart, since not used compare continuous horizontal totals, updated series 5 linewidth: 0, , made title of category '' wouldn't included in legend stack (https://jsfiddle.net/lpgty7rq/):

function drawvisualization() {     // raw data (not accurate)     var data = google.visualization.arraytodatatable([         ['month', 'bolivia', 'ecuador', 'madagascar', 'papua new guinea', 'rwanda', '', {type: 'number', role: 'annotation'}],         ['application', 5, 2, 2, 8, 0, 17, 17],         ['friend', 4, 3, 5, 6, 2, 20, 20],         ['newspaper', 6, 1, 0, 2, 0, 9, 9],         ['radio', 8, 0, 8, 1, 1, 18, 18],         ['no referral', 2, 2, 3, 0, 6, 13, 13]     ]);      var options = {         isstacked: true,         title : 'monthly coffee production country',         vaxis: {title: 'cups'},         haxis: {title: 'month'},         seriestype: 'bars',         series: {5: {type: 'line', linewidth: 0}},      };     var chart = new google.visualization.combochart(document.getelementbyid('chart_div'));    chart.draw(data, options); } 

and voila!