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 t

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);