Add custom text to Google Visualization tooltip

Question

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.

score 12 · Accepted Answer · edited Jul 16 '14 at 22:47

12

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'

edited Jul 16 '14 at 22:47

Stéphane Bruckert

21,706
14
92
130

answered Dec 09 '11 at 11:46

Jonathan Heinen

606
6
9

2

See https://developers.google.com/chart/interactive/docs/customizing_tooltip_content – Dan Diplo Feb 07 '13 at 10:16
13

How does this answer the question? The goal was to extend the default tooltip with a new value, but this example replaces it. – odedfos Mar 29 '15 at 11:18
3

Agree with @odedfos, not sure how this solves the problem. The example shows how to modify the default tooltips, but not add multiple rows. – Adam Youngers May 01 '16 at 18:24

score 9 · Answer 2 · answered Sep 30 '15 at 09:27

If you enable focusTarget: 'category' in the options. Then the tooltip column becomes a value for the the tooltip of the current x,y dots (which gets rendered the way you want). So you can mimic the value and add the additional text you want. Here is an example what I mean:-

  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Year');
    dataTable.addColumn('number', 'Sales');
    // A column for custom tooltip content
    dataTable.addColumn({type: 'string', role: 'tooltip'});
    dataTable.addRows([
      ['2010', 600,'600: 15% growth'],
      ['2011', 1500, '1500: 50% growth'],
      ['2012', 800, '800: -40% growth'],
      ['2013', 1000, '1000: 25% growth']
    ]);

    var options = { legend: 'none', focusTarget: 'category'};
    var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_custom_tooltip'));
    chart.draw(dataTable, options);
  }

Thank you soo much !!! This was so hard to find, and yet i thought something plenty would use! You dont even need focusTarget: 'category', specifying your data like '600: 15% growth' does the trick. — Hayden Thring, Dec 05 '17 at 19:43
It realy works!, even more, if you have a isStacked: "absolute" (or whaterver the option for the property), it will concat all the stacked values in one tooltip with the break down of every value in the row. — Kadaiser, Mar 21 '22 at 14:29

Adam Youngers · Answer 3 · 2016-05-02T22:06:44.020

I haven't found a way to add another data row to the default tooltips. You can get close to what you are looking for using HTML tooltips. You do lose the tail on the tooltip though. Here is a JSbin with the solution I used... http://jsbin.com/tovizukabu/3/edit?css,js,output

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Year');
    dataTable.addColumn('number', 'Sales');
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', 'Expense');
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});

    dataTable.addRows([
      ['2010', 1500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 600,'<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$600</strong></div>'],
      ['2011', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1500, '<div><strong>2011</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,500</strong></div>'],
      ['2012', 1200, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 800, '<div><strong>2012</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$800</strong></div>'],
      ['2013', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1000, '<div><strong>2013</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,000</strong></div>']
    ]);

    var options = {tooltip: {isHtml: true}};
    var chart = new google.visualization.AreaChart (document.getElementById('tooltip_action'));
    chart.draw(dataTable, options);
  }

And the CSS...

.google-visualization-tooltip {
border: solid 1px #bdbdbd;
border-radius: 2px;
background-color: white;
position: absolute;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
font-size: 11px;
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
font-family: arial;
}

.google-visualization-tooltip div {
  padding:5px;
}

Add custom text to Google Visualization tooltip

3 Answers3

Linked