chartsgoogle-visualization

How to remove y-axis values from google chart

I am using google charts.

In the attached image I do not want the 100, 50, 0, -50, -100 numbers to show. But I do want the Satisfaction label to show. Does anyone know how this can be achieved in google charts? Is there and option on vAxis?

enter image description here

Another (less important) issue is that I only want the grid lines at 100, 0 and -100. I do not want the other 6.

I currently have the following options set...

var options = {
    chartArea: { width: '80%' },
    colors: ['#00ff00', '#ff0000'],
    vAxis: {
        title: 'Satisfaction',
        maxValue: 100,
        minValue: -100,
        gridlines: { count: 2 }
    },
    legend: { position: 'bottom' }
};

Thanks.

Solution

  • use the following vAxis option... 

    textPosition: 'none'

    see following working snippet... 

    google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    [0, 10, 12, 18],
    [2, 16, 18, 19],
    [4, 18, 19, 24],
    [6, 26, 28, 22],
    [8, 13, 15, 21],
    [10, 32, 31, 33]
  ]);

  var options = {
    chartArea: { width: '80%' },
    colors: ['#00ff00', '#ff0000'],
    vAxis: {
      textPosition: 'none',
      title: 'Satisfaction',
      maxValue: 100,
      minValue: -100,
      gridlines: { count: 2 }
    },
    legend: { position: 'bottom' }
  };

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