I’m using a line graph in Google Chart and there’s just one thing left I need to configure, the hAxis dates.
The dates have 2 days gap only, like Feb 2, Feb 4, Feb 6, Feb 8, and so on, and so it shows 15 dates on the hAxis. I want to widen the gap maybe by 7 days or lessen the number of dates displayed by just 4 dates. How to achieve that? I can’t seem to find the right config for it here: https://developers.google.com/chart/interactive/docs/gallery/linechart.
Here’s my chart: https://jsfiddle.net/r2wxayn8/
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Price');
data.addRows([
[new Date(2022, 1, 1), 0.2500], [new Date(2022, 1, 2), 0.2500], [new Date(2022, 1, 3), 0.2600], [new Date(2022, 1, 4), 0.2700], [new Date(2022, 1, 5), 0.2800], [new Date(2022, 1, 6), 0.3000],
[new Date(2022, 1, 7), 0.2900], [new Date(2022, 1, 8), 0.3300], [new Date(2022, 1, 9), 0.3100], [new Date(2022, 1, 10), 0.3200], [new Date(2022, 1, 11), 0.3200], [new Date(2022, 1, 12), 0.3200],
[new Date(2022, 1, 13), 0.3100], [new Date(2022, 1, 14), 0.3200], [new Date(2022, 1, 15), 0.3000], [new Date(2022, 1, 16), 0.3100], [new Date(2022, 1, 17), 0.3000], [new Date(2022, 1, 18), 0.3000],
[new Date(2022, 1, 19), 0.2900], [new Date(2022, 1, 20), 0.2800], [new Date(2022, 1, 21), 0.2700], [new Date(2022, 1, 22), 0.2700], [new Date(2022, 1, 23), 0.2700], [new Date(2022, 1, 24), 0.2600],
[new Date(2022, 1, 25), 0.2700], [new Date(2022, 1, 26), 0.2600], [new Date(2022, 1, 27), 0.2500], [new Date(2022, 1, 28), 0.2500], [new Date(2022, 1,29), 0.2400], [new Date(2022, 1, 30), 0.2500]
]);
var options = {
hAxis: {
gridlines: {
color: 'none'
},
format: 'MMM dd',
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
vAxis: {
gridlines: {
color: '#DFE3EB'
},
minorGridlines: {
color: '#DFE3EB'
},
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
tooltip: {
textStyle: {
color: '#677185',
fontSize: 12
}
},
series: {
0: {
color: '#26a172'
}
},
legend: { position: 'none' },
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}