Custom format for google chart vAxis label - charts

Question

I have an area chart and on the vAxis I'd like the labels to read # hrs. For the data below, the Total Time Spent column is an integer of total minutes. I'd like the vAxis label to show as # hrs. So for example, the first row would read 31.3 hrs. I'm not finding a way to create a custom formatter for that where I can convert the minutes into decimal hours and append the "hrs" suffix. Any ideas? Thanks.
var data = google.visualization.arrayToDataTable([
['Date', 'Deals Processed', 'Total Time Spent'],
[ '12/17/2020', 4, 1878],
[ '12/18/2020', 3, 290],
[ '12/21/2020', 8, 2772],
[ '12/22/2020', 6, 1084],
[ '12/23/2020', 4, 1175]
]);

Answer 1

we can customize the y-axis labels by providing our own ticks.
for each tick, we can use object notation, and provide the value (v:) and formatted value (f:)
{v: 1878, f: '31.3 hrs'}
we can also customize the tooltip when hovering the point by using the same approach,
in the data table.
['12/17/2020', 4, {v: 1878, f: '31.3 hrs'}],
or we can set the formatted value after the data table has been created.
data.setFormattedValue(0, 2, (1878 / 60).toFixed(1) + ' hrs');
to build the ticks, we can use data table method --> getColumnRange(columnIndex)
this will return an object with properties for min & max
which we can use to build our ticks array.
// build y-axis labels
var range = data.getColumnRange(2);
var max = Math.ceil(range.max / 100) * 100;
var ticks = [];
for (var i = 0; i <= max + 600; i = i + 600) {
ticks.push({
v: i,
f: (i / 60).toFixed(0) + ' hrs'
});
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Date', 'Deals Processed', 'Total Time Spent'],
[ '12/17/2020', 4, 1878],
[ '12/18/2020', 3, 290],
[ '12/21/2020', 8, 2772],
[ '12/22/2020', 6, 1084],
[ '12/23/2020', 4, 1175]
]);
// format tooltip
for (var i = 0; i < data.getNumberOfRows(); i++) {
var minutes = data.getValue(i, 2);
data.setFormattedValue(i, 2, (minutes / 60).toFixed(1) + ' hrs');
}
// build y-axis labels
var range = data.getColumnRange(2);
var max = Math.ceil(range.max / 100) * 100;
var ticks = [];
for (var i = 0; i <= max + 600; i = i + 600) {
ticks.push({
v: i,
f: (i / 60).toFixed(0) + ' hrs'
});
}
var options = {
height: 400,
vAxis: {
ticks: ticks
}
};
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>