CODEWITHSUNDEEP
javascriptgoogle-visualization
Alex Broadwin
Alex Broadwin

Reputation: 1338

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.

Upvotes: 1

Views: 4927

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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>

Upvotes: 1

Related Questions