How to label Google Column Chart bars

Question

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 on graph and no way I can see what values correspond to certain x-axis.

This would be solved if I can somehow print y-axis values on top of bars.But, I couldn't find any mention in the API doc on how to do it.

There is similar problem here, but it doesn't answers my question.

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

There are some other more than year old unanswered questions here, I am hoping someone might have found a solution or a workaround by now, that is why asking this question again.

Google Visualization: Column Chart, simple question but can't find the answer

How to show values on the the top of columns Google Chart API

Can you show me how to achieve what I want using How can I customize this Google Bar Chart? ?

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.

Comments

[Watt]

+1 Thanks for link. I found another work around, just use the log scale to show y axis values vAxis:{logScale:true}

[benji_r]

Is there a way to make in different colors between different. for example if it between 40 and 80 red, and if is 80 or higher make it yellow?

[Yaseen Ahmad]

what if i want label on any one bar and others should be empty without any line. jsfiddle.net/z05kfm8b