Removing months from google visualisation line chart - charts

Question

My x-axis for google visualisation chart is javascript new Date(year+i, 0, 0). However when I print the line chart. It shows M J S at the bottom with the year number.
How can I remove these M J S (which I presume are May June and September).

Answer 1

the following snippet re-produces the problem, with year number combined with month abbreviations...
2020 M J S 2021 M J S etc...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Mutual Fund');
for (var y = 2020; y < 2024; y++) {
for (var m = 0; m < 12; m++) {
data.addRow([new Date(y, m, 1), (10000 + y + m)]);
}
}
var container = document.getElementById('chart');
var chart = new google.visualization.LineChart(container);
chart.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
to only show year, you can use hAxis option format.
hAxis: {
format: 'yyyy'
}
however, this could cause the year to repeat (depending on the width of the chart)...
2020 2020 2020 2020 2021 2021 2021
see following snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Mutual Fund');
for (var y = 2020; y < 2024; y++) {
for (var m = 0; m < 12; m++) {
data.addRow([new Date(y, m, 1), (10000 + y + m)]);
}
}
var container = document.getElementById('chart');
var chart = new google.visualization.LineChart(container);
chart.draw(data, {
hAxis: {
format: 'yyyy'
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
to ensure the year doesn't repeat, we must also provide hAxis option ticks.
ticks must be in the same format as the data on the x-axis, in this case a date.
so we provide the jan date for each year...
hAxis: {
format: 'yyyy',
ticks: [new Date(2020, 0, 1), new Date(2021, 0, 1), new Date(2022, 0, 1)]
}
you should be able to create the ticks dynamically, from the data.
see following snippet for an example...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Mutual Fund');
var ticks = [];
for (var y = 2020; y < 2024; y++) {
for (var m = 0; m < 12; m++) {
data.addRow([new Date(y, m, 1), (10000 + y + m)]);
if (m === 0) {
ticks.push(new Date(y, m, 1));
}
}
}
var container = document.getElementById('chart');
var chart = new google.visualization.LineChart(container);
chart.draw(data, {
hAxis: {
format: 'yyyy',
ticks: ticks
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>