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 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!