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:
Thanks in advance for your help :)
Edit:
I also tried
vAxis: {
minValue:0,
viewWindow: {
min: 0
}
}
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>