3

Can anyone help to get the percent symbol[%] in Y axis value.

I have attched png. in that in y axis 0 t0 18 values are there I want to see it as 0% to 18%. https://i.stack.imgur.com/pF6U0.png

Linda Lawton - DaImTo
  • 106,405
  • 32
  • 180
  • 449
  • 1
    You can add it yourself by just add the % symbol at the end of the value? example from google playground: ['2003%', 1336060, 400361, 1001582, 997974], – Vincent Hogendoorn Feb 24 '14 at 11:25
  • its not string; its float value and its dynamic it continously changes its value ,but in my case i required ['2003', 1336060%, 400361%, 1001582%, 997974%] –  Feb 24 '14 at 12:58

2 Answers2

6

You need to format in two places: the data and the axis. To format the data, use a NumberFormatter:

var formatter = new google.visualization.NumberFormat({pattern: '#%'});
// format column 1 of the DataTable
formatter.format(data, 1);

Format the axis values, via the vAxis.format option:

vAxis: {
    format: '#%'
}
asgallant
  • 26,060
  • 6
  • 72
  • 87
  • 2
    Not work for me. It continues work like 1000%-10 000% when i have min 1 and max 100. This helps me -http://stackoverflow.com/questions/22473337/google-chart-veritcal-axis-with-percentage-sign – fdrv Sep 25 '15 at 03:56
  • Dont forget that when you use Percent, values must be below 1. ex: 47% = 0.47, 2.65% = 0.0265 – SequenceDigitale.com Mar 24 '19 at 16:16
6

No need of the google.visualization line, just the next line is needed:

vAxis: {
    format: "#'%'"
}

Explanation: The difference is the double quotes and simple quote. format property follows ICU pattern (as per GChart specs) that is used for formatting. When the simple quotes are not used, the presence of % multiplies x100 the value per the ICU specs. So by adding the simple quotes, the % is kind of escaped (more info)

Jonathan Huet
  • 395
  • 1
  • 4
  • 12
  • Thanks for the quotes remark, it was very useful, however this will only format the y axis, not the labels – Samo Sep 06 '22 at 23:55