Google Charts line chart not showing 0-100 as a percentage scale

1
votes

I'm trying to create a basic Google Charts line chart to show percentages for 3 values over time. The chart is displaying but I'm struggling to get the vAxis to show 0 - 100%, the top value is just the highest value from my dataset (45%).

This is the code I'm using:

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

          var data = new google.visualization.DataTable();
          data.addColumn('date', 'date');
          data.addColumn('number', 'tool1');
          data.addColumn('number', 'tool2');
          data.addColumn('number', 'tool3');

          data.addRows([
            [new Date(2000, 8, 5),  10, 20, 30],
            [new Date(2001, 8, 5),  20, 30, 40],
            [new Date(2002, 8, 5),  25, 35, 45],
          ]);

          var options = {
            chart: {
              title: 'Tool rollout'
            },
            vAxis: {minValue: 0,
                    maxValue: 100,
                    format: "percent"
                    },
            width: 900,
            height: 500,
          };

          var chart = new google.charts.Line(document.getElementById('line'));
          chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="line"></div>
</body>
</html>

But this is how it's rendering:

enter image description here

The docs suggest that setting vAxis.maxValue "Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data." but I'm obviously missing something as this doesn't seem to get used.

1
chartsgoogle-visualization

1 Answers

1
votes

You´re using material chart Google api, try using:

vAxis: {
        format: "#.#%",
        viewWindow: {
           max:1.0,
           min:0.2
        }
}