How to set tooltips to display percentages to match axis in Google Visualization Line Chart?

I got this working by specifying a formatter exactly as you do:

var chartData = google.visualization.arrayToDataTable(tableData);
var formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,
    suffix: '%'
});
formatter.format(chartData, 1);

The 1 in the last call means the second column, in which I have float values.

Then I specify a format for the axis in the chart options, escaping the percentage sign as pointed out by documentation and others here:

var chartOptions = {
    vAxis: { format: '#\'%\'' }
};

I then draw the chart:

var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(chartData, chartOptions);

This renders a left side axis with values like 10%, 20% and so on. And the tooltips looks like the default one but with a percentage like 10.10%, 20.20% and so on.

If you want two fraction digits in the left side axis as well, use this as format in the chart options instead:

vAxis: { format: '#.00\'%\'' }

var formatter = new google.visualization.NumberFormat({ 
  pattern: '#%', 
  fractionDigits: 2
});

Thanks to http://groups.google.com/group/google-visualization-api/

You must surround the percent (%) symbol itself in single quotes.

The line I used to do this looks like this: options['vAxis'] = {'format': "#,###'%'"};

Combining this with your formatter above, you can make the vertical axis have a percent symbol and also make the tooltip include it too.