How do I align Google Chart gridlines with my data points? - date

Question

While I have read several similar SO posts (most notably this one, which is the reason for the first, commented-out dataArray in my snippet), I still cannot seem to make my gridlines along the horizontal axis align with my actual data points. As you can see from the snippet below, I have specified the hAxis.ticks. While it's no longer reflected in this snippet, I've also played around with hAxis.gridlines.count, hAxis.minorGridlines.count, and several other options, all to no avail.
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = new google.visualization.DataTable();
data.addColumn('date', 'Dates');
data.addColumn('number', 'Ratings');
/* const dataArray = [
[new Date('2020-12-22'), 2],
[new Date('2020-01-05'), 6],
[new Date('2020-01-05'), 7],
[new Date('2020-02-02'), 8],
[new Date('2020-02-16'), 10],
[new Date('2020-03-01'), 5],
[new Date('2020-03-15'), 9],
] */
const dataArray = [
[new Date('12/22/2019'), 2],
[new Date('01/05/2020'), 6],
[new Date('01/19/2020'), 7],
[new Date('02/02/2020'), 8],
[new Date('02/16/2020'), 10],
[new Date('03/01/2020'), 5],
[new Date('03/15/2020'), 9],
];
data.addRows(dataArray);
const dataView = new google.visualization.DataView(data);
const chart = new google.visualization.LineChart(document.querySelector('#chart'));
chart.draw(dataView, {
pointSize: 5,
lineWidth: 3,
hAxis: {
format: "MMM d, yyyy",
ticks: dataArray.map(d => d[0])
}
});
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Answer 1

appears to be an issue with the 'current' version of google charts.
if you go back to version '45', it appears to work as expected.
see following working snippet...
google.charts.load('45', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = new google.visualization.DataTable();
data.addColumn('date', 'Dates');
data.addColumn('number', 'Ratings');
/* const dataArray = [
[new Date('2020-12-22'), 2],
[new Date('2020-01-05'), 6],
[new Date('2020-01-05'), 7],
[new Date('2020-02-02'), 8],
[new Date('2020-02-16'), 10],
[new Date('2020-03-01'), 5],
[new Date('2020-03-15'), 9],
] */
const dataArray = [
[new Date('12/22/2019'), 2],
[new Date('01/05/2020'), 6],
[new Date('01/19/2020'), 7],
[new Date('02/02/2020'), 8],
[new Date('02/16/2020'), 10],
[new Date('03/01/2020'), 5],
[new Date('03/15/2020'), 9],
];
data.addRows(dataArray);
const dataView = new google.visualization.DataView(data);
const chart = new google.visualization.LineChart(document.querySelector('#chart'));
chart.draw(dataView, {
pointSize: 5,
lineWidth: 3,
hAxis: {
format: "MMM d, yyyy",
ticks: dataArray.map(d => d[0])
}
});
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>