Question

33

How to label Google Column Chart bars

rated 0 times [ 36] [ 3] / answers: 1 / hits: 39371 / 11 Years ago, tue, june 11, 2013, 12:00:00

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? ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

johannatorim

Add To Favorites

Follow

Total Points: 599

Total Questions: 124

Total Answers: 100

Location: Virgin Islands (U.S.)

Member since Fri, May 7, 2021

3 Years ago

answered 11 Years ago mahogany · Accepted Answer

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

    }

  });

}