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?

Invigorate

Answer 1

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

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

Invigorate

Corrrect, just then add your line : formatter.format(data, 1); – Andriette

Answer 2

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

Frowsy

Thanks for that trick of wrapping the % in single quotes - otherwise the axis values are multiplied by 100! Drove me mad ... – Shauna

I think it's important to note that you have to format the chart before you actually draw the chart. I couldn't figure out why this wasn't working for me... it's because I tried to use formatter.format(chartData, 1) AFTER I had already created chart. In my case I had multiple columns that needed formatting so I put that code in my script 4 times, each with a different column number. – Bridgehead

Answer 3

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.

Oceania

I don't think this will affect the tooltips. I think it sets the labels of the axis. – Invigorate

Answer 4

Ok... So this is a little late. I admit I didn't need this seven years ago. Nevertheless, this worked for me.

var rows = data.getNumberOfRows();

for (var i = 0; i < rows; i++) {
    data.setFormattedValue(i, 4, (data.getFormattedValue(i, 4)*100).toFixed(1) + "%"); //LY
    data.setFormattedValue(i, 3, (data.getFormattedValue(i, 3)*100).toFixed(1) + "%"); //TY
}

In my case, I am using four columns, two of which are assigned to the right axis with percentages. I wanted those columns' tooltips to reflect the proper percentage rather than the decimal representation.

Here is a link to the Google docs:

https://developers.google.com/chart/interactive/docs/reference#DataTable_setFormattedValue

I hope this helps some random stranger looking for it. ;)

Lusatia