Código:
Se ve asi : <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages: ['corechart', 'bar']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Value'); data.addColumn({type: 'string', role: 'annotation'}); data.addRows([ ['Foo', 53, 'Foo text'], ['Bar', 71, 'Bar text'], ['Baz', 36, 'Baz text'], ['Cad', 42, 'Cad text'], ['Qud', 87, 'Qud text'], ['Pif', 64, 'Pif text'] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 1, 2]); var chart = new google.visualization.BarChart(document.getElementById('chart_div')); chart.draw(view, { width: 600, height: 400, bar: {groupWidth: "95%"}, series: { 0: { type: 'bars' }, 1: { type: 'line', color: 'grey', lineWidth: 0, pointSize: 0, visibleInLegend: false } }, vAxis: { maxValue: 100 } }); } </script> <div id="chart_div" style="width: 900px; height: 300px;"></div>
La idea es que las anotaciones o labels se vean al lado de cada barra en la posicion correcta pero se ven desordenados.
Este codigo lo estoy cambiando de este ejemplo :
Puesto que necesito que sean de forma horizontal como en la primera imagen.
¿ Alguien me puede ayudar ?