Alex Broadwin Alex Broadwin - 3 months ago 37
Javascript Question

How to add axis ticks/labels in google column chart?

I've been trying to add ticks/labels to the following google chart's vertical axis. I want the left-hand axis to show 0-100% with ticks every 20%, but nothing I've tried has worked.

I've tried copying the same approach I see in google's provided jsfiddles, but I can never translate the behavior to my own chart.

Here is the code for my chart without the labels:

// Load the Visualization API and the corechart package.
google.charts.load('current', {
'packages': ['bar']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Problems', 'One', 'Another', 'Yet another'],
['Easier problems', 79, 45, 25],
['Harder problems', 64, 20, 9],
]);

var options = {
chart: {
title: 'Navy Troubleshooting Competition',
subtitle: '% solved',
'backgroundColor': {
fill: 'transparent'
},
}
};

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


Here it is in jsfiddle form.

Everything I've tried has provided exactly zero visible effect, so I've left off my failed attempts; apologies if this comes off as a lack of completeness on my part.

Any help would be greatly appreciated. Thank you for your time.

Answer

make sure you have enough room to display the ticks

after adding height: 400 the ticks in the below example appeared...

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['bar']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Problems', 'One', 'Another', 'Yet another'],
    ['Easier problems', .79, .45, .25],
    ['Harder problems', .64, .20, .9],
  ]);

  var options = {
    chart: {
      title: 'Navy Troubleshooting Competition',
      subtitle: '% solved',
      'backgroundColor': {
        fill: 'transparent'
      },
    },
    height: 400,
    legend: {
    	position: 'none'
    },
    vAxis: {
      format: '#,##0.0 %',
      ticks: [0, .2, .4, .6, .8, 1]
    }
  };

  var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_y_div"></div>