Tooltip number formatting in google chart - charts

Question

How can I format number in a tooltip in google chart? I tried to apply "none" formatting in datatable and also applied "####" formatting on h-axis in google chart option but still can see 2,012 in tooltip.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
{label: "year", type: "number", format: "none"},
{label: "performance", type: "number", format: "none"},
],
["2009", 10],
["2010", 15],
["2011", 3],
["2012", 5]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}, format: "####"},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
JSFiddle can be found here:
https://jsfiddle.net/ux37j0dk/3/

Answer 1

by default, the tooltip will display the formatted value of data table cell
you can use the NumberFormat class to format the data table...
var yearPattern = "0";
var formatNumber = new google.visualization.NumberFormat({
pattern: yearPattern
});
formatNumber.format(data, 0);
see following working snippet...
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[{
label: "year",
type: "number",
format: "none"
},
{
label: "performance",
type: "number",
format: "none"
},
],
["2009", 10],
["2010", 15],
["2011", 3],
["2012", 5]
]);
var yearPattern = "0";
var formatNumber = new google.visualization.NumberFormat({
pattern: yearPattern
});
formatNumber.format(data, 0);
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
},
format: yearPattern
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
you can also use object notation to supply both the value (v:) and the formatted value (f:),
when loading the data table...
[{v: "2009", f: "2009"}, 10],
see following working snippet...
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[{
label: "year",
type: "number",
format: "none"
},
{
label: "performance",
type: "number",
format: "none"
},
],
[{v: "2009", f: "2009"}, 10],
[{v: "2010", f: "2010"}, 15],
[{v: "2011", f: "2011"}, 3],
[{v: "2012", f: "2012"}, 5]
]);
var yearPattern = "0";
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
},
format: yearPattern
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>