With Google stacked column/bar charts, is there a way to display the value on each group like that :

I tried with annotations but if I'm not wrong it only allow us to annotate the whole column, like in this codeopen

...
var data = google.visualization.arrayToDataTable([
    ['API Category', 'Social', 'Music', 'File Sharing', 'Storage',
     'Weather', { role: 'annotation' } ],
    ['2011', 98, 53, 12, 16, 6, '15'],
    ['2012', 151, 34, 26, 36, 49, '14'],
    ['2013', 69, 27, 22, 17, 15, '14'],
]);
...

Ty.

With Google stacked column/bar charts, is there a way to display the value on each group like that :

I tried with annotations but if I'm not wrong it only allow us to annotate the whole column, like in this codeopen http://codepen.io/anon/pen/xLIuB

...
var data = google.visualization.arrayToDataTable([
    ['API Category', 'Social', 'Music', 'File Sharing', 'Storage',
     'Weather', { role: 'annotation' } ],
    ['2011', 98, 53, 12, 16, 6, '15'],
    ['2012', 151, 34, 26, 36, 49, '14'],
    ['2013', 69, 27, 22, 17, 15, '14'],
]);
...

Ty.

• javascript
• google-visualization

2 Answers 2

You can add more "{ role: 'annotation' }" types between categories:

var data = google.visualization.arrayToDataTable([
    ['API Category', 
        'Social', { role: 'annotation' }, 
        'Music', { role: 'annotation' }, 
        'File Sharing', { role: 'annotation' }, 
        'Storage', { role: 'annotation' },
        'Weather', { role: 'annotation' } 
    ],
    ['2011', 98, '98', 53, '53', 12, '12', 16, '16', 6, '6'],
    ['2012', 151, '151', 34, '34', 26, '26', 36, '36', 49, '49'],
    ['2013', 69, '69', 27, '27', 22, '22', 17, '17', 15, '15'],
]);

Source: Google Charts stacked columns with different annotations for each piece of the column

You can display value on each stack of column.

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['API Category', 'Social', {
            role: 'annotation'
        }, 'Music', {
            role: 'annotation'
        }, 'File Sharing', {
            role: 'annotation'
        }, 'Storage', {
            role: 'annotation'
        },
            'Weather', {
            role: 'annotation'
        }],
        ['2011', 98, 'Social', 53, 'Music', 22, 'File Sharing', 16, 'Storage', 26, 'Weather'],
        ['2012', 151, 'Social', 34, 'Music', 26, 'File Sharing', 36, 'Storage', 49, 'Weather'],
        ['2013', 69, 'Social', 27, 'Music', 22, 'File Sharing', 27, 'Storage', 25, 'Weather'], ]);

    var options = {
        width: 1000,
        height: 550,
        legend: {
            position: 'top',
            maxLines: 3,
            textStyle: {
                color: 'black',
                fontSize: 16
            }
        },
        isStacked: true,

        // Displays tooltip on selection.
        // tooltip: { trigger: 'selection' }, 
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    // Selects a set point on chart.
    // chart.setSelection([{row:0,column:1}]) 

    // Renders chart as PNG image 
    // chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
}

body {
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #000;
}
a:link, a:visited {

<script src="http://www.google./jsapi?fake=.js"></script>
<div id="chart_div"></div>

See working example (JsFiddle) : http://jsfiddle/majaharshaikh/bspd7gjt/1/