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

Question

The tooltips can be set to display percentages using the following code:

var formatter = new google.visualization.NumberFormat({
      fractionDigits: 2,
      suffix: '%'
    });
formatter.format(data, 1); // Apply formatter to first column.

Is there a way for NumberFormat to multiply each element by 100? Otherwise the tooltip appears as .50%.

I am using vAxis.format = "format:'#%' " which does multiply by 100. So .5 is displayed as 50% on the vertical axis.

According to the documentation(icu-project.org/apiref), this can be overwritten by enclosing the % in single quotes, but this did not work.

The net result is that the tooltips do not match the axis. What is the best way to do this?

Answer 1

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\'%\'' }