12

Im using google chart api to show line chart in my application, in that chart now i want to show the vertical axis values with percentage sign. for that i tried the following option

chart.draw(data, {vAxis: {format:'#%'} } );

as mentioned in

How do you set percentage in Google Visualization Chart API?

by 'B Seven'

when using this method, the vertical axis values got multiplied by 100. i.e instead of '12%' - im getting 1200% in vaxis!!!!

i have checked in https://developers.google.com documents also, i cant find any approach to do this.

Is there any alternate to show percentage sign in vaxis.

Community
  • 1
  • 1
Gnanz
  • 1,833
  • 5
  • 24
  • 51
  • What is your real value: 12 or 0.12? – Anto Jurković Mar 18 '14 at 07:57
  • 12 it is. ( have to show data for 1- 100%) – Gnanz Mar 18 '14 at 08:02
  • FYI: value in vaxis label is populated by chart based on the data i'm providing. im not passing any value for chart axis – Gnanz Mar 18 '14 at 08:04
  • So the 1200% is correct. You have to divide values with 100 to get 12% – Anto Jurković Mar 18 '14 at 08:04
  • yeah 12*100=1200, thats right :-) but i want to add only percentage sign with the exising vaxis label. see im just adding the format '#%'- which should append the '%' symbol with the existing value but it is multiplying with 100 also. that is the part i donit want. i want to restrict that to add % symbol alone, is there any options? – Gnanz Mar 18 '14 at 08:07

2 Answers2

34

Escaping the percentage sign in format works for me.

chart.draw(data, {vAxis: {format: '#\'%\''} } );

This shows Y axis labels with percentage sign without any data update as I expected.

smottt
  • 3,272
  • 11
  • 37
  • 44
Gnanz
  • 1,833
  • 5
  • 24
  • 51
  • 1
    This didn't work for me, but this did: `{format: '#' + "'%'"}` It's the same idea, maybe the API changed, it's been 3.5 years since your answer. – davidreedernst Dec 05 '17 at 15:01
1

Problem is that there is no data type percentage but only number, date... Google docs describes hAxis.format and vAxis.format as:

For number axis labels, this is a subset of the decimal formatting ICU pattern set. For instance, {format:'#,###%'} will display values "1,000%", "750%", and "50%" for values 10, 7.5, and 0.5.

And ICU pattern set states:

%   Prefix or suffix    Yes Multiply by 100 and show as percentage

So, it seems that the only option is to divide values with 100 on server or client side.

Anto Jurković
  • 11,188
  • 2
  • 29
  • 42