Add custom text to Google Visualization tooltip

Jeremy picture Jeremy · Dec 8, 2011 · Viewed 26.6k times · Source

I need to add in another row of text on each of the tooltips I'm displaying (on an area chart). I've included a screenshot to illustrate what I'm hoping to do.

My current chart: The chart with the additional text added. (This is what I'm trying to do): enter image description here

I'm hoping to do this without having to use a third party JS for custom tooltips. Is there any way to just add another row of text-based content to be displayed in the default tooltips?

Any help is greatly appreciated.

Answer

Jonathan Heinen picture Jonathan Heinen · Dec 9, 2011

Have a look at https://developers.google.com/chart/interactive/docs/roles#whatrolesavailable:

Additional tooltip rows are what you are looking for!

The example:

label: 'Year',   'Sales',    null,   'Expenses',    null
 role: domain,     data,    tooltip,    data,      tooltip    
        '2004',    1000, '1M$ sales,     400,    '$0.4M expenses
                           in 2004'                  in 2004'
        '2005',    1170, '1.17M$ sales,  460,    '$0.46M expenses
                            in 2005'                  in 2005'
        '2006',     660, '.66$ sales,   1120,     '$1.12M expenses
                            in 2006'                 in 2006'
        '2007',    1030, '1.03M$ sales,  540,    '$0.54M expenses
                            in 2007'                  in 2007'