Remove decimal values from the axis - charts

Question

I'm using google charts and I have an issue with formatting of the hAxis.
It looks like this when there are only 4 values on it:
I want to remove those decimal numbers between the real values. I don't want it to show 0.5,1.5,2.5,3.5
How can it be done?

Answer 1

there are a few options that could be used, if you were using a classic chart
but those are not supported using material charts
you can use option hAxis.format to change the number format,
but this will only remove the decimal and cause the numbers to repeat
the only method i've found when using a matieral chart,
is to use string values for the x-axis...
['Lesson', 'Average', 'Average best'],
['1', 10, 10],
['2', 10, 10],
['3', 10, 10],
['4', 7, 7.5]
or you can use a DataView to convert the numbers to strings...
var data = google.visualization.arrayToDataTable([
['Lesson', 'Average', 'Average best'],
[1, 10, 10],
[2, 10, 10],
[3, 10, 10],
[4, 7, 7.5]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
return dt.getValue(row, 0).toFixed(0);
},
label: data.getColumnLabel(0),
type: 'string'
}, 1, 2]);
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Lesson', 'Average', 'Average best'],
[1, 10, 10],
[2, 10, 10],
[3, 10, 10],
[4, 7, 7.5]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
return dt.getValue(row, 0).toFixed(0);
},
label: data.getColumnLabel(0),
type: 'string'
}, 1, 2]);
var options = {
chart: {
title: 'Results distribution by lesson',
},
height: 280
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(view, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>