CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Matthias Seifert
Matthias Seifert

Reputation: 2083

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
    }
}

Upvotes: 2

Views: 2968

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

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>

Upvotes: 2

Related Questions