Search code examples
google-visualizationnumber-formattinglinechart

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


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?


Solution

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

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