put labels on top of inside bar in google interactive bar chart

Question

I have created a bar chart using google Column Chart, now

1. I have only integer values in my datatable but google divide acis with float values, is there a way to force chart mark only integers?
2. is there any way to show value labels on top or inside bar chart? I found some way for image chart, but I whould like to keep chart interactive

Answer 1

There is no direct solution to this as yet because annotations are not supported in column chart. But let me share a work around for this: You can create a combo chart with two series having same data (as that of your column chart) along with the annotation column. Set the type of the first series to bars and that of the other series to line. Finally, specify visibleInLegend, lineWidth, and pointSize properties of the second series to false and 0s respectively.

var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', label: 'Labels' });
data.addColumn({ type: 'number', label: 'Bar Series' });
data.addColumn({ type: 'number', label: 'Line Series' });
data.addColumn({ type: 'string', role: 'annotation' });

data.addRows([['Label1', 10, 10, '10'],
             ['Label1', 20, 20, '20'],
             ['Label1', 40, 40, '40'],
             ['Label1', 5, 5, '5'],
             ['Label1', 30, 30, '30'],
             ]);

var barchart = new google.visualization.ComboChart(document.getElementById('bar_element'));
var options = {series: [{ type: 'bars' },
                        { type: 'line', lineWidth: 0, visibleInLegend:false, pointSize: 0}]};

barchart.draw(data, options);