Google Chart, how to move annotation on top of columns

Question

I'm using Google Chart's stacked column chart, what i wanna achieve is to display the total on top of each column and i'm using annotation for this. As you look at the image, somehow only the annotation on the 5th column (1,307.20) is working as expected.

enter image description here

As i investigate , this seem like a bug of Google Chart , this bug can be explained like below

[[Date, Car, Motobike, {role: :annotation}],
[June 2015, 500, 0, 500],
[Feb 2015, 500, 600, 1100]]
[March 2015, 700, 0, 700],

With the above data, the annotation for Feb 2015 is the only which is displayed correctly , the other 2 do not since the last value of then is 0 , when I change the last value to 1 for June and March , the annotation is displayed correctly.

Then I think of a work around is to always display the "non-zero" data on top , and here's the result:

enter image description here

The annotations are moved on top properly , but as you can see, it's located within the column and what i want to achieve is to move it on top of the column .

I'm stuck with this for a while , Google Documentation doesn't help much with this case. Any help would be highly appreciated

score 6 · Answer 1 · answered Sep 24 '15 at 18:50

I had the same problem, some of my series had 0 as my last value so the label would show on the X Axis instead of at the top. With dynamic data it would be a real challenge to ensure the last value was never 0. @dlaliberte gave me a hint where to start with this comment:

"As a workaround, you might consider using a ComboChart with an extra series to draw a point at the top of each column stack. You'll have to compute the total of the other series yourself to know where to put each point."

I found a combo chart from google's gallery and opened jsfiddle to see what I could do. I left the data mostly, but changed the series name labels and made the numbers a little simpler. Don't get caught up on the purpose of the graph the data is regardless, I just wanted to figure out how to get my annotation to the top of the graph even when the last column was 0 (https://jsfiddle.net/L5wc8rcp/1/):

function drawVisualization() {
    // Some raw data (not necessarily 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 by 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 this graph, which is a great start:

As you can see since series 5 (our Total of the other series) is a type: 'line', so it will always point to the top of the stack. Now, I didn't necessarily want the line in my chart, since it was not used to compare continuous horizontal totals, so I updated series 5 with lineWidth: 0, and then made the title of that category '' so that it wouldn't be included in the legend as a stack (https://jsfiddle.net/Lpgty7rq/):

function drawVisualization() {
    // Some raw data (not necessarily 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 by 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!

score 5 · Answer 2 · answered Sep 09 '16 at 14:29

5

Use alwaysOutside: true.

annotations: {
     textStyle: {
         color: 'black',
         fontSize: 11,
     },
     alwaysOutside: true
}

answered Sep 09 '16 at 14:29

Taisbevalle

246
1
9
19

are these options? – vy32 Aug 29 '19 at 21:01
In annotations you put your parameters. AlwaysOutside, in bar/column charts, if set to true, draws all annotations outside of the bar/column. – Taisbevalle Aug 29 '19 at 21:36
Yes, but does this go in the options parameter? – vy32 Aug 30 '19 at 22:32
Yes, it is options var options = { annotations: { alwaysOutside: true } }; – sandeep.gosavi Apr 19 '20 at 13:40

score 4 · Answer 3 · answered Jun 04 '15 at 14:33

You will want to use the annotations.alwaysOutside option:

annotations.alwaysOutside -- In Bar and Column charts, if set to true, draws all annotations outside of the Bar/Column.

See https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

However, with a stacked chart, the annotations are currently always forced to be inside the columns. This will be fixed in the next major release.

As a workaround, you might consider using a ComboChart with an extra series to draw a point at the top of each column stack. You'll have to compute the total of the other series yourself to know where to put each point. Then make the pointSize 0, and add the annotation column after this series.

Google Chart, how to move annotation on top of columns

3 Answers3