How To Label Google Column Chart Bars

I am using Google Chart API to create chart for values which goes from 1 to millions. Problem The bars which are representing smaller values (ex: less than 50 or so) are invisible

Solution 1:

Check out Andrew Gallant's JSFiddle here:

http://jsfiddle.net/asgallant/QjQNX/

It uses a clever hack of a combo chart to accomplish what I think you're looking for.

google.load("visualization", "1", {packages: ["corechart"]});
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.ComboChart(document.getElementById('chart_div'));

  chart.draw(view, {
    height: 400,
    width: 600,
    series: {
      0: {
        type: 'bars'
      },
      1: {
        type: 'line',
        color: 'grey',
        lineWidth: 0,
        pointSize: 0,
        visibleInLegend: false
      }
    },
    vAxis: {
      maxValue: 100
    }
  });
}

Solution 2:

I had some setbacks using annotation and the invisible line (for example, having it displayed in the tooltip as another series).

I've made a hack to the ComboChart (could work with BarChart and ColumnChart as well, with a couple of changes) to insert the labels into the SVG.

Check out this fiddle: http://jsfiddle.net/augustomen/FE2nh/

Tested on Firefox 21, Chrome 27 and IE 9.