CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Chanckjh
Chanckjh

Reputation: 2597

Change Google Charts Column's Y-axis from numbers to custom names

I would like to change Google Charts Column's Y-axis from numbers to custom names. For example on the Y-axis there would be "F,E,D,C,B,A" or "worst, bad, acceptable, good, best". Is this possible in Google Charts Column? https://jsfiddle.net/api/post/library/pure/

Javascript:

google.setOnLoadCallback(drawStuff);

function drawStuff() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Country');
  data.addColumn('number', 'GDP');
  data.addRows([
    ['US', 16768100],
    ['China', 9181204],
    ['Japan', 4898532],
    ['Germany', 3730261],
    ['France', 2678455]
  ]);

 var options = {
   title: 'GDP of selected countries, in US $millions',
   width: 500,
   height: 300,
   legend: 'none',
   bar: {groupWidth: '95%'},
   vAxis: { gridlines: { count: 4 } }
 };

 var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
 chart.draw(data, options);

 document.getElementById('format-select').onchange = function() {
   options['vAxis']['format'] = this.value;
   chart.draw(data, options);
 };

};

Upvotes: 1

Views: 1242

Answers (1)

dlaliberte
dlaliberte

Reputation: 3260

You should use the 'ticks' option on the vAxis, and include the formatted value for each numeric value. e.g.

vAxis: { ticks: [{v: 200000, f: 'best'}, {v: 400000, f: 'good'}, ... ] }

Upvotes: 2

Related Questions