Max and min values on Google Charts

Question

How can I set a max and a min value on a Google Chart?

I've tried this without success:

vAxis: {
    viewWindowMode:'explicit',
        viewWindow: {
            max:3000,
            min:500
        }
    }

This is all the code I'm using:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          vAxis: {
            viewWindowMode:'explicit',
            viewWindow: {
              max:3000,
              min:500
            }
        },
          bars: 'vertical' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, options);
      }
</script>

(example from https://developers.google.com/chart/interactive/docs/gallery/barchart)

Thks in advance.

Answer 1

With the release of Material Charts, Google is modifying how the options are specified. The structure for these options is not yet finalized, so Google provides a converter function for the classic options structure into the new one, and it is recommended that you use it instead of using options that may change in the future.

So you could fix your problem in one of two ways:

1. You could use the conversion function, as Google recommends (you can see this method demonstrated in this jsfiddle or Google's official documentation (note the note right at the bottom of the linked heading))

      google.load("visualization", "1.0", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          vAxis: {
            viewWindowMode:'explicit',
            viewWindow: {
              max:3000,
              min:500
            }
        },
          bars: 'vertical', // Required for Material Bar Charts.
            width: 800,
            height: 600
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
          

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }

    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
    
          <div id="barchart_material"></div>
      
    

2. You could continue using options that may change in the future. If you do not care about your charts breaking, the option you are looking for is axes.y.all.range.{min,max}. You can see that option in action in this jsfiddle.

google.load("visualization", "1.0", {
    packages: ["bar"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
    ]);

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        },
        axes: {
            y: {
                all: {
                    range: {
                        max: 3000,
                        min: 500
                    }
                }
            }
        },
        bars: 'vertical', // Required for Material Bar Charts.
        width: 800,
        height: 600
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));


    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="barchart_material"></div>

Source: I work on Google Charts.