Google chart vertical axis strange label

Question

I have made a Google column chart. It displays ok. but the vertical axis label is showing an unit that I never set myself. here is the screen shot.

enter image description here

I don't understand why it displays "1 td" instead of 1000 , "1,2 td" instead of 1200.

Here is my code:

google.load("visualization", "1.1", {packages:["bar"]});

google.setOnLoadCallback(drawChart);

function drawChart() {
     var data = google.visualization.arrayToDataTable([
            ….
            ….
]);

var options = {
          title: 'My Test',
 };

var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);

<div id="columnchart_material" style="width: 900px; height: 500px;"></div>

my code has nothing special part for the vertical axis and I used from google chart gallery. why it gets 'td' unit for vertical axis even I didn't set myself? Is it Google column chart default option? I try to manipulate the vertical axis value with vAxis:. but no luck. Any advices?

davidkonrad davidkonrad · Accepted Answer · 2015-05-17T11:55:55

Apparently, when using material bar charts, the y-axis (vAxis) default format is short, meaning showing td for thousands and so on. To reset this set format to '' :

var options = {
  axes : {
    y : {
      all : {
        format : {
           pattern : ''
        }
      }
    }
  }
}    
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);

demo -> http://jsfiddle.net/sfc9aLd4/

But the material charts are still in beta, and a lot of the options are yet not documented or documented poorly. Luckily we can use the google visualization options object layout and convert it with convertOptions(options) :

var options = {
    vAxis : {
        format : '' //or #####
    }
}    
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));

Will result in the same as above axes : { ... }
demo -> http://jsfiddle.net/3aq7gucd/

With material charts there seems to be some differences for format. 'none' is now ''. decimal should be changed to ####.## or likewise. scientific, currency and percent works as before.

Google chart vertical axis strange label

1 Answers