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

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 '
' + row.name + '
' +
        '$' + row.worth + ' B, ' + _scope.sortBy + ': ' + row[_scope.sortBy] + '
';
}

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