google charts dataView format differently from the dataSource? - charts

Question

I've created a dataView in order to put a label on my Google bar chart like :
options = {
title: arr[0][0],
titleTextStyle: { fontSize: '12', color: '#666' },
colors: ['#50c0ed'],
backgroundColor: { fill: 'transparent' },
height: 220,
width: '100%',
is3D: true,
fontSize: '11',
hAxis: { format: '$###,###,###.00' },
vAxis: {
format: '$###,###,###.##',
viewWindow: {
min: 0
}
},
chartArea: { width: '100%', height: '60%', top: '40', left: '65', right: '10' },
tooltip: { textStyle: { color: '#333', fontSize: '11' } }
};
formatter = new google.visualization.NumberFormat({ pattern: '$###,###.##/SF/year' });
formatter.format(data, 1);`enter code here`
view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation",
}]);
chart = new google.visualization.ColumnChart(container[0]);
and the result is enter image description here , but i want to exclude from the label the /SF/year ending but still keep it when i hoover over the bar ,
I tried to set formatter only after i initialize the dataVIew but this doesen't work , Is there i way i can remove /SF/year from the label but keep it when i hoover over ?

Answer 1

use another formatter without --> /SF/year
formatterNumberOnly = new google.visualization.NumberFormat({ pattern: '$###,###.##' });
then in view, use custom calc function instead of "stringify"
use formatValue method to format the value of each row
view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return formatterNumberOnly.formatValue(dt.getValue(row, 1));
},
type: "string",
role: "annotation",
}]);