Format a time as hours:minutes on a Google Charts y-axis

Question

I have a Google Chart where the y-axis is measured in minutes.

How can I format the y-axis so the labels display the time in a format like 2hrs40, or 2:40, or something similar? I don't want to display the time in raw minutes, and I don't want to display it as a decimal like "1.5" for 90 minutes.

The documentation tells me to use the ICU Pattern Set, but I can't figure it out from that page.

Is this possible? And if I can't format the time like this directly, is there a way I can "hack" the chart after the fact by changing the <svg> element using Javascript?

Answer 1

The formatting options don't allow you to do that. You can, however, use the vAxis.ticks option to manually specify the values to use for the tick marks and the strings you want to use to represent the values. The vAxis.ticks option takes an array of objects, where each object has v (value) and f (formatted value - what gets displayed on the chart) properties. Something like this should work:

vAxis: {
    ticks: [{v: 0, f: '0:00'}, {v: 30, f: '0:30'}, {v: 60, f: '1:00'}, {v: 90, f: '1:30'}]
}