CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Gnanz
Gnanz

Reputation: 1873

Google Chart veritcal axis with percentage sign

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.

Upvotes: 12

Views: 10883

Answers (2)

Gnanz
Gnanz

Reputation: 1873

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.

Upvotes: 34

Anto Jurković
Anto Jurković

Reputation: 11258

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.

Upvotes: 1

Related Questions