Google Bar chart bars & axis do not correlate to data - charts

Question

https://i.imgur.com/qKcSRjS.png
The values of the bars, from top to bottom, are 66, 77, 91, 0
As you can see, the labels on the X axis are not to scale and seem to simply indicate the value of each bar, and the bars are also not scaled to their value they seem to simply stack in a staircase fashion. The bottom bar should be 'empty' as it is 0.
The data is dynamically generated but here is the resulting code:
function drawRightY() {
var data = google.visualization.arrayToDataTable([ ['Date', 'Received'], ['1/15/2018', '66'],['1/22/2018', '77'],['1/29/2018', '91'],['2/5/2018', '0'] ]);
var materialOptions = {
chart: {
hAxis: {
title: 'Date',
minValue: 0,
scaleType: 'log'
},
vAxis: {
title: 'Received'
},
bars: 'horizontal',
legend: {
position: 'none'
},
axes: {
y: {
0: { side: 'left' }
}
}
};

Answer 1

the values in the data should be numbers, not strings (remove single quotes)
['1/15/2018', '66'] // <-- string
['1/15/2018', 66] // <-- number
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([ ['Date', 'Received'], ['1/15/2018', 66],['1/22/2018', 77],['1/29/2018', 91],['2/5/2018', 0] ]);
var materialOptions = {
hAxis: {
title: 'Date',
minValue: 0,
scaleType: 'log'
},
vAxis: {
title: 'Received'
},
bars: 'horizontal',
legend: {
position: 'none'
},
axes: {
y: {
0: { side: 'left' }
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>