Google Visualization - vAxis maxValue property not working

For a reason that totally escapes me, I can't get the maxValue property of vAxis to work:

var options = { vAxis: { maxValue: .85 } }

The vAxis is a percentage with a range of 0 to 100% and I'd like to save some room by setting the max to 85%. I think it has something to do with this project switching between 7 DataSources and 4 ChartTypes because I've never had this problem when I made single charts.

The following Snippet is a reduced case with the minimal functionality that could be related to the issue. Thank you for your time and effort.

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>G04B32</title>
  <link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');
    *,
    *:before,
    *:after {
      font-style: normal !important;
    }
    body {
      position: relative;
    }
    form {
      background-image: url(https://glpro.s3.amazonaws.com/ag/04/data/bgl720x404.png);
      background-color: #333;
    }
    #ii {
      margin-top: 80px
    }
    .panel {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    #chart {
      height: 70vh; width: 96vw; background-image: url(https://glpro.s3.amazonaws.com/ag/04/data/bgl720x404.png); background-size: cover; background-repeat: no-repeat; }
      .group.group: after, .chart.chart: after, .root.root: after {
        color: #333;
      }
      div.google-visualization-tooltip {
        background-color: rgba(0, 0, 0, .6);
        border-radius: 6px;
        min-width: 325px;
        max-height: 75px;
      }
      div.google-visualization-tooltip > ul > li {
        display: table-cell;
        margin: 0 5px;
      }
      div.google-visualization-tooltip > ul > li > span {
        color: gold;
      }
      #groupOpt.off {
        display: none;
      }
      #groupOpt.on {
        display: block;
      }
  </style>
</head>

<body class='sl'>
<!--THIS SECTION WAS REMOVED-->
  <section id="ii">
    <h1>Sources</h1>
    <figure id='chart'></figure>
  </section>
  <footer></footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      packages: ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    var options = {
      backgroundColor: {
        fill: 'transparent'
      },
      tooltip: {
        textStyle: {
          color: 'gold',
          fontSize: 16,
          fontName: 'Verdana'
        },
        trigger: 'focus',
        isHtml: true
      },
      animation: {
        startup: true,
        duration: 1000,
        easing: 'out'
      },
      title: 'Percentage of Americans in Favor of Same-sex Marriage (2001-16)',
      titleTextStyle: {
        color: 'gold',
        fontName: 'Open Sans',
        fontSize: 22
      },
      hAxis: {
        textStyle: {
          color: 'cyan'
        },
        title: 'Year',
        titleTextStyle: {
          color: 'gold',
          fontName: 'Open Sans',
          fontSize: 22
        },
        format: '####',
        slantedText: true
      },
      vAxis: {
        maxValue: .85,// <<<<<<<<<<<<<<<<<<<<<DOESN'T WORK>>>>>>
        format: '#%',
        textStyle: {
          fontName: 'Open Sans',
          color: 'cyan'
        },
        title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
        titleTextStyle: {
          color: 'gold',
          fontName: 'Arial',
          fontSize: 16
        }

      },
      
      legend: {
        textStyle: {
          color: 'white',
          fontName: 'Verdana'
        },
        position: 'bottom'
      },

      crosshair: {
        trigger: 'both',
        orientation: 'both',
        focused: {
          color: 'gold',
          opacity: .7
        },
        selected: {
          color: 'cyan',
          opacity: .7
        }
      },
      pointSize: 12,
      theme: 'materials',
      chartArea: {
        left: 100,
        top: 75,
        width: '90%',
        height: '60%'
      }

    }

    var chart;
    var main;
    var cArray = ['LineChart', 'AreaChart', 'ColumnChart', 'ScatterChart'];
    var qArray = [DATA REMOVED];

    function drawChart() {
      chart = new google.visualization.ChartWrapper();
      chart.setDataSourceUrl(qArray[0]);
      chart.setChartType(cArray[0]);
      chart.setContainerId('chart');
      chart.setOptions(options);
      chart.draw();
    }

    function alterChart(C, Q) {

      C = Number(C);
      Q = Number(Q);
      var URL = qArray[Q];
      var VIS = cArray[C];

      main = new google.visualization.ChartWrapper();
      main.setDataSourceUrl(URL);
      main.setChartType(VIS);
      main.setContainerId('chart');
      main.setOptions(options);
      main.draw();
    }

    $('#chartOpt, #groupOpt, #rootOpt').on('change', function(e) {
      var chartSel = $("input[name='chart']:checked").val();
      var groupSel = $("input.chx:checked").val();
      if (e.target !== e.currentTarget) {
        var target = e.target.id;
        var status = $("input[name='root']:checked").attr('id');
      }

      if (target === 'root0' && status === 'root0') {
        $('#groupOpt').slideUp().removeClass('on').addClass('off');
        return alterChart(chartSel, groupSel);
      }
      if (target === 'root1' && status === 'root1') {
        $('#groupOpt').slideDown().addClass('on').removeClass('off');
        return alterChart(chartSel, groupSel);
      }

  <!--THIS PART REMOVED-->
    }
  </script>
  <!--<script src='gvis-api.js'></script>-->
</body>

</html>

SNIPPET

Recommended topics

Hot tags