5

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?

GMA
  • 5,816
  • 6
  • 51
  • 80

2 Answers2

9

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'}]
}
asgallant
  • 26,060
  • 6
  • 72
  • 87
  • This works. As I don't know in advance what the range of the y-axis will be, I had to generate the `ticks` object dynamically, which is a little bit hacky, but no matter. Thanks! – GMA Nov 05 '13 at 07:58
  • I realise this post is quite old now, but @GMA, if you happen still have the (even hacky) code you wrote, if you could post it up, that would be great. I have similar issue to solve. – Alex Little Dec 22 '20 at 14:23
0

Google lets you do that....I'm doing this to show data like "5 mins". In your options do this:

            vAxis: {
            format: 'm \'mins\''
        },
Daniel Nelson
  • 366
  • 2
  • 7