Search code examples
javascriptchartsgoogle-visualization

Google Chart keeps showing negative Values on yAxis


I am currently working with Google Charts to visualize data to the user. If there is no Data, the google chart automatically draws the y-Axis from -1 to 1. But in my case, -1 makes no sense, so I want it to show the empty chart from 0 to n (max value doesn't matter, I just don't want negative ones). I already searched for solutions, and the most common answer is, that

viewWindow: {
    min: 0
}

should help. But, it doesn't. I guess I just use it the wrong way because it works for so many other users, but I can't figure out, what's wrong. So here is how I tried to avoid negative Y-Values:

function drawChart() {
    var data = google.visualization.arrayToDataTable(dataArray);

    var options = {
        vAxis: { viewWindowMode: "explicit", viewWindow:{ min: 0 }},
        chart: {
            title: 'Check Diagramm',
            subtitle: '@chartTitle',
        },
        colors: ['#8BC34A', '#F44336']
    };

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

    chart.draw(data, options);
}

And the result is always:

enter image description here Thanks in advance for your help :)

Edit:

I also tried

vAxis: {
    minValue:0,
    viewWindow: {
        min: 0
    }
}

Solution

  • viewWindow: {min: 0} works, but when using Material charts,
    have to convert the options...

    google.charts.Bar.convertOptions

    see following snippet...

    google.charts.load('current', {
      callback: function () {
        var dataArray = [
          ['Month', 'Positive Checks', 'Negative Checks'],
          ['Jan', 0, 0],
          ['Feb', 0, 0],
          ['Mar', 0, 0],
          ['Apr', 0, 0],
          ['May', 0, 0]
        ];
    
        var data = google.visualization.arrayToDataTable(dataArray);
    
                      // convert options
        var options = google.charts.Bar.convertOptions({
          height: 600,
          width: 800,
          vAxis: {
            viewWindow: {
              min: 0
            }
          },
          chart: {
            title: 'Check Diagramm',
            subtitle: '@chartTitle',
          },
          colors: ['#8BC34A', '#F44336']
        });
    
        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
    
        chart.draw(data, options);
      },
      packages: ['bar']
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="columnchart_material"></div>