Google line chart with curveType: function changes vAxis values

Question

I am trying to display Google line chart with some values. My minimum value is 0 and my maximum value is 100. My graph has 2 lines, not only a single line.

I use curveType: 'function' for the graph options, and for some reason in the chart - the minimum is being set to -100 and the maximum value is being set to +200. Please run the script and look at the number to the left of the graph - these are the values I'm asking about and wishes to control them.

What am I doing wrong?

Here is my code:

 <!DOCTYPE html>
<html>
<head>
</head>

<body>
<div id="LineChart"></div>
</body>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value'); 
    data.addColumn('number', 'Value2');
    data.addRows([
    ['5/21/2019',50,50],
    ['5/21/2019',100,0],
    ['5/21/2019',89,11],
    ['5/21/2019',90,10],
    ['5/21/2019',90,10],
    ['5/22/2019',90,10],
    ['5/22/2019',76,24],
    ['5/23/2019',76,24],
    ['5/23/2019',76,24]  
     ]);

        var Lineoptions = {     
        title: 'Overall success',
        lineWidth: 4,       
        colors: ['#c9e3f4','#ea4c4c'],
          curveType: 'function',
        legend:{position:'none'},       
            fontSize:23,
             hAxis : { 
        textStyle : {
            fontSize: 16 
        }
        },
        vAxis : { 
        textStyle : {
            fontSize: 16 
        },
         minValue:0,
            maxValue:100
    },
    annotations: {
    textStyle: {

   fontSize: 25,
   bold: true,
   italic: false,
   color: '#000000', 
   opacity: 1 
   },
    alwaysOutside: true
    }

    };
    var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
    Linechart.draw(data, Lineoptions);      
    google.visualization.events.addListener(chart7, 'ready', afterDraw);    
    }   
</script>
</html>

WhiteHat WhiteHat · Accepted Answer · 2019-05-23T11:17:46

not sure why minValue and maxValue do not work.

however, you can use viewWindow instead...

  viewWindow: {
    min:0,
    max:100
  }

see following working snippet...

// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Value');
  data.addColumn('number', 'Value2');
  data.addRows([
    ['5/21/2019',50,50],
    ['5/21/2019',100,0],
    ['5/21/2019',89,11],
    ['5/21/2019',90,10],
    ['5/21/2019',90,10],
    ['5/22/2019',90,10],
    ['5/22/2019',76,24],
    ['5/23/2019',76,24],
    ['5/23/2019',76,24]
  ]);

  var Lineoptions = {
    title: 'Overall success',
    lineWidth: 4,
    colors: ['#c9e3f4','#ea4c4c'],
    curveType: 'function',
    legend:{position:'none'},
    fontSize:23,
    hAxis : {
      textStyle : {
        fontSize: 16
      }
    },
    vAxis : {
      textStyle : {
        fontSize: 16
      },
      viewWindow: {
        min:0,
        max:100
      }
    },
    annotations: {
      textStyle: {
        fontSize: 25,
        bold: true,
        italic: false,
        color: '#000000',
        opacity: 1
      },
      alwaysOutside: true
    }
  };
  var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
  Linechart.draw(data, Lineoptions);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="LineChart"></div>

Google line chart with curveType: function changes vAxis values

1 Answers