Custom format for google chart vAxis label

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]
]);

user_5090771 · Answer

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);
});

Custom format for google chart vAxis label

1 Answers