Google Charts - full html in tooltips

Question

I am trying to make Google Charts Display custom tooltips with full HTML in them.

I know how to enable tooltips and pass appropriate data - the problem is - even whe

Answer 1

I had to add {p: {html: true}} to each row data instead of column, as well as isHtml option for the whole chart.

Answer 2

Google gives an example here.

You will need to designate the column to be html tooltip:

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

You will also need to pass the correct option to your chart:

tooltip: {isHtml: true}

I have tested this with line chart, and it works.

Edit: It also looks like (at least for line chart) you have to use the chart wrapper for this to work. I couldn't get it to obey the options without the wrapper.

Answer 3

This feature was incredibly obscure! The key for me, as noted earlier, was adding ", 'p': {'html': true}" when using 'addColumn()' to define a tooltip; the 'draw()' option 'tooltip: {isHtml: true}' alone is not enough.

It's very handy to use a function call to return the HTML string when creating the array of 'graphItems' that gets passed to 'addRows()':

function myToolTip(row) {
    return '<div style="white-space: nowrap; padding:5px;"><b>' + row.name + '</b><br>' +
        '$' + row.worth + ' B, <b>' + _scope.sortBy + '</b>: ' + row[_scope.sortBy] + '</div>';
}

var graphItems = [];
angular.forEach(_scope.ForbesList, function(row, key) {
    graphItems.push([key, row.worth, myToolTip(row)]);
});

var data = new google.visualization.DataTable();
data.addColumn('number', 'Rank');
data.addColumn('number', 'Worth');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addRows(graphItems);

More here: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

Answer 4

This is currently working for me:

Step 1: be certain BOTH of these settings are in your chart options:

// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }

Step 2: add your tooltip one of the chart columns:

dataTable.addColumn({'type': 'string', 'role': 'tooltip' , 'p': {'html': true}});

Step 3: In your data, add the HTML for your tooltip at the appropriate column:

chartReading.push(chartSensorTooltip(obsDate, reading[1]));

The method "chartSensorTooltip( date, number)" is a JS method I wrote myself to properly format the HTML for each values' tool tip. You don't need to write this sort of method, but as someone above suggested, doing so makes it very easy to format all the tooltips the same way.

The FocusTarget thing is what tripped me up. HTH someone!