Custom text in google charts tooltip

4,309 views
Skip to first unread message

Emily Yount

unread,
Mar 28, 2012, 1:15:00 PM3/28/12
to google-visua...@googlegroups.com
Is it possible to alter the text that feeds into google charts tooltips? I'm working with dollar amounts and would like to show the numbers with a dollar sign in front of them. Likewise, there are situations where I would prefer the percent sign after a value rather than "Percent: 52", which is simply pulling in the string value from the data table. 

Thanks, 
Emily

asgallant

unread,
Mar 28, 2012, 3:47:48 PM3/28/12
to google-visua...@googlegroups.com
There are a number of avenues available.  The easiest is to use the formatters (http://code.google.com/apis/chart/interactive/docs/reference.html#formatters), which will format your data for you according to the parameters you specify.  You can also manually format the output using the DataTable#setFormattedValue method or by entering values into the table as an object: {v: value, f: 'string formatted value'}.  The third option is to use the 'tooltip' column role type to create your own.  From what you said, though, formatters should work fine for you.  Use them like this:

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

Emily Yount

unread,
May 7, 2012, 4:20:42 PM5/7/12
to google-visua...@googlegroups.com
Thanks! This worked!

Ravish Kumar

unread,
Apr 28, 2015, 2:39:18 AM4/28/15
to google-visua...@googlegroups.com
dear its not working in asp.net project. i have used many time but i can Show $ sign in my tooltip.
Reply all
Reply to author
Forward
0 new messages