Show captions above bars in Google Charts

Question

I have simple Google Column Chart with one series of data. And i need to show captions above each bar, because tooltip not enough. But there are no standart options to do it. You seen this?

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

$(document).ready(function() {

var data = new google.visualization.DataTable()
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1], 
    ['Zucchini', 1],
    ['Pepperoni', 2]
]);


new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data, {width: 500, height: 440, legend: 'none',
            enableInteractivity: false});  
});

also you can play with this code at jsfiddle

Leksat Leksat · Accepted Answer · 2012-08-27T15:00:55

This answer is little more than what been asked. The code below demonstrates how to create bar chart with different colors for each bar, and with different labels above each bar.

function drawVisualization() {

  var data = google.visualization.arrayToDataTable([
    ['',        'Value', 'Value', 'Value', 'Value' ],
    ['Label1',  0,       0,       0,       997974  ],
    ['Label2',  1538156, 0,       0,       0       ],
    ['Label3',  0,       440514,  0,       0       ],
    ['Label4',  0,       0,       1004163, 0       ]
  ]);

  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {
            isStacked: true,
            legend: {position: 'none'},
            colors: ['grey', 'lightgray', 'yellow', 'cyan']
           }
      );
}

Paste it in google playground and check yourself.

Show captions above bars in Google Charts

1 Answers