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):

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 1

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'

Answer 2

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);
  }

Answer 3

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;
}