Format number with . as thousand separator and no decimals - charts

Question

I've alreayd checked here:
https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-OmU
https://developers.google.com/chart/interactive/docs/querylanguage#Format
https://developers.google.com/chart/interactive/docs/reference#numberformatter
I want to display the number on the x-axis in a graph drawn with Google Charts with no decimals and a . as the thousand separator.
var options = {
hAxis: {
title: 'Month'
},
vAxis: {
title: 'Price (€)', format: '#.###'
}
};
So 3200 should be shown as 3.200
I've already tried for the format variable:
#.#
#.###
#

Answer 1

since the format option will not work in this situation,
you can provide your own ticks for vAxis...
use object notation for each tick
{
v: value,
f: formattedValue
}
use google's NumberFormat class...
var formatNumber = new google.visualization.NumberFormat({
fractionDigits: 0,
groupingSymbol: '.'
});
format each tick using the formatValue method
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addRows([
[1, 3000],
[2, 3100],
[3, 3200],
[4, 3300],
[5, 3400],
]);
var formatNumber = new google.visualization.NumberFormat({
fractionDigits: 0,
groupingSymbol: '.'
});
var columnRange = data.getColumnRange(1);
var ticks = [];
for (var i = columnRange.min; i <= columnRange.max; i=i+100) {
ticks.push({
v: i,
f: formatNumber.formatValue(i)
});
}
var options = {
hAxis: {
title: 'Month'
},
vAxis: {
ticks: ticks,
title: 'Price (€)'
}
};
var container = document.getElementById('chart');
var chart = new google.visualization.LineChart(container);
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>