How to customize tooltips(text and Format) in Google Vizualization Bar Charts ?

Question

I am using Google Visualization Bar Chart and I would like to customize or change the tooltip text and format that appears when clicking on a bar.

I have been through documentation but I didn't find a way to implement this. Do you know:

1. if it is possible?
2. if yes, could you write me (or give me a link to) some code examples ?

Thx,

Fabien.

Answer 1

I was also looking for the same option. Seems like there isn't any direct way. But we can disable the default tooltip and popup our own version using SelectHandler. Do let us know if you have figured out a more better/direct way. Thanks

Answer 2

The only way I found to disable it was to traverse the DOM in the hover handler (for pie charts anyway):

$(pie.Ac.firstElementChild.contentDocument.childNodes[0].childNodes[2].childNodes[1].firstChild.childNodes[2]).remove();

Which is hideous and subject to Google maintaining the structure that exists... is there a better way?

Answer 3

I was trying to do a similar thing with a Google pie chart. With the original code, on mouseover, the tooltip was showing the label, the raw number, and the percentage.

The orignal code was:

data.setValue(0, 0, 'Christmas trees');

data.setValue(0, 1, 410000000);

And the tooltip would show "Christmas trees 410000000 4.4%."

To format the text, I added a line to the code, so it was:

data.setValue(0, 0, 'Christmas trees');

data.setValue(0, 1, 410000000);

data.setFormattedValue(0, 1, "$410 million");

The result was a tooltip that read, "Christmas trees $410 million 4.4%"

I hope this helps!