Google Charts - Avoid showing negative values in yAxis

Question

I have the following code:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'People'],
    ['2010',0]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            hAxis: {title: "Year"},
            backgroundColor: 'none'
           }
      );
}

Which gives me the following chart

How can I do to avoid showing negative values in the yAxis? I have tried adding vAxis: {minValue:0} without any luck.

There is a playground/sandbox for these charts: Google Charts Playground

​

Ubangishari

Answer 1

You need to set viewWindowMode as explicit

vAxis: {viewWindowMode: "explicit", viewWindow:{ min: 0 }}

Boisterous

Now this on the other hand does seem to fix my problem. Thank you! – Bhang

viewWindowMode: "explicit" is no longer needed as it is now deprecated. developers.google.com/chart/interactive/docs/gallery/… – Kirschner

Side Note: when you are using curvy lines with the Line Charts then it will produce a negative number, if you use straight lines it will not. – Cookery

Answer 2

viewWindowMode: "explicit" is deprecated in current version which uses: vAxis.viewWindow.min:

vAxis: {
    viewWindow: {
        min: 0
    }
}

Attribute

Rightly said, viewWindowMode: "explicit" is deprecated. Soure – Snyder

Answer 3

It was not working form me. I needed to add the max value:max:1

The negative axis only appears if all the values are 0, so, for not bounding in the max, I only put the vAxis if there are no positives values (using PHP).

The example of my code is:

                $hayPositivos = false;
            foreach($valores as $valor){
                $html[]=",
                ['".$valor['dia']."', ".intval($valor['validadas']).",      ".intval($valor['totales'])."]";
                if(!$hayPositivos && (intval($valor['validadas']) >0 || intval($valor['totales']) >0)){
                    $hayPositivos = true;
                }
            }

                    $html[]="]);

                    var options = {
                      title: '".t('News by time:').$periodo_nombre."',
                      legend: { position: 'bottom' }";
                    if(!$hayPositivos){
                        $html[] = ",
                        vAxis: {
                          viewWindow: {min: 0, max:1}
                        }";
                    }
                      
                    $html[] = "};

And this is how it is seen:

If all values are negative

If there is any positive value

Trapper

Thanks, adding max: 1 fixed it, as only adding min: 0 didn't – Enforcement