Column Chart - Show percentage above each bar

[Nicole Goldup]

Hi there,

page: http://www.hpvregister.org.au/research/coverage-data/hpv-vaccination-coverage-2013

Is it possible to show the percentage value above each bar? e.g. like the attached image

Thanks,
Nicole

[Andrew Gallant]

You can add an "annotation" column to your data.  You can use a DataView to calculate this automatically for you:

var view = new google.visualization.DataView(dataTable);

view.setColumns([0, 1, 2, 3, {

    type: 'string',

    role: 'annotation',

    sourceColumn: 2,

    calc: function (dt, row) {

        return (dt.getValue(row, 2) * 100).toFixed(1) + '%';

    }

}]);

var chart = new google.visualization.ColumnChart(document.getElementById('coverage'));

chart.draw(view, options);

Incidentally, you could take the same approach with the tooltip column as well, since all of the values in that are based on data that exists elsewhere in the DataTable.

[Nicole Goldup]

Thanks Andrew.

It works, however the values are off center. Is it possible to make the percentages centered?

Regards,
Nicole

[Andrew Gallant]

The SVG text nodes that make up the annotations inherit the text-align style of parent elements, which your CSS has set to "left" in layout.css:

#headerCenter, #bannerCenter, #pageTitleCenter, #mainContentCenter, #footerCenter, #contentBottomCenter {
 width:93.75%; /* (960 / 1024) x 100 */ /*width:81.6666667%; /* (980 / 1200) x 100 */ /*width:61.25%; /* (980 / 1600) x 100 */ /* width:94.230769%; /* (980 / 1040) x 100 */
 margin:0 auto;
 text-align:left;
}

You'll need to do some experimentation to find the right settings, but I suggest starting with this:

#coverage {
    text-align: center;
}

[Nicole Goldup]

Hi Andrew,

I have figured it out. When I decreased the annotation font size, it centered itself.

Regards,
Nicole