Custom Tooltip in Google Sheets Org Chart

Question

I am trying to find a way to make a custom tooltip under Org Chart built using the Google Sheets.

Currently, I have an Org chart that is built by simply selecting the data on the sheet and inserting the chart through the menu. I have recently learned that it is possible to have a custom tooltip (see an [example here][1][1]: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltip-actions)

My data is currently under 3 columns. I am unable to figure out how to call the data from the sheet to draw the org chart with custom tooltips.

I would like to keep the ability to update the chart dynamically whenever the data is changed/added/removed from the sheet.

Can someone please help me with this.

Best Regards, Syed H

Answer 1

you need to use the property tooltip to true in the option

var options = {
   tooltip: {isHtml: true},
   legend: 'none'
};

then you can add tooltip in the AddColumns and you just have to pass the content tooltip in add Row

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,'First Tooltip'],
      ['2011', 1500, 'Second Tooltip'],
      ['2012', 800, 'Third Tooltip'],
      ['2013', 1000, '$1M in sales last year.']
]);

Here is a JSFiddle Example for Bar chart: https://jsfiddle.net/foufrix/qfcps6vu/3/

And here is for Org Chart : https://jsfiddle.net/foufrix/z3fvm9p1/2/

Custom Tooltip for org Chart using css : https://jsfiddle.net/z3fvm9p1/7/ Implementation of W3S code : https://www.w3schools.com/css/css_tooltip.asp

If you have dynamique Data you can listen to it and everytime it changes you can relaunch the function drawChart