Google Charts Treemap Tooltip not working

Question

Somebody can help me, why tooltip is not visible?. I tried with "tooltip: {isHtml: true}" but is not working. Any help appreciate.

<script>
   google.charts.load('current', {'packages':['treemap']});
   google.setOnLoadCallback(drawChart);

   function drawChart() {
     var data = google.visualization.arrayToDataTable([
       ['Customer', 'Region', 'Sales', 'Score'],
       ['America',   null,         0,        0],
       ['Apple',     'America',    0,        0],
       ['VW',        'America',    0,        0],
       ['Costco',    'America',    0,        0],
       ['Amazon',    'America',    0,        0],

       ['1-Apple',   'Apple',      115.5,    0.70],
       ['2-Apple',   'Apple',      115.5,    0.70],
       ['3-Apple',   'Apple',      52.5,     0.70],
       ['1-VW',      'VW',         49,       0.45],
       ['2-VW',      'VW',         9.4,      0.39],
       ['3-VW',      'VW',         7.4,      0.35]
       ['1-Costco',  'Costco',     5.2,      0.3],
       ['1-Amazon',  'Amazon',     4.8,      0.3],
     ]);

     var options = {
        headerColor: '#dfe4e9',
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 4,
        minHighlightColor: '#FF8B30',
        midHighlightColor: '#FFC03C',
        maxHighlightColor: '#FFE730',
        minColor: '#29ECB4',
        midColor: '#00ACED',
        maxColor: '#09F6A9',
        headerHeight: 25,
        showScale: false,
        useWeightedAverageForAggregation: true,
        showTooltips: true,
        generateTooltip: showFullTooltip
     };

      var tree = new google.visualization.TreeMap(document.getElementById('grph'));
      tree.draw(data, options);
  }
</script>

This is the function for the tooltip:

function showFullTooltip(row, size, value) {
   return 
      '<div style="z-index:1000000; background:#9daab6; padding:10px;">' +
      '<span><b>' + dataT.getValue(row, 0) + '</b>, ' + dataT.getValue(row, 1) + 
      ', ' + dataT.getValue(row, 2) + ', ' + dataT.getValue(row, 3) + '</span>' + 
      '<br>' +
      'Datatable row: ' + row + 
      '<br>' +
      dataT.getColumnLabel(2) + ' Sales: ' + size + 
      '<br>' +
      dataT.getColumnLabel(3) + ': ' + value + 
      ' </div>';
}

idk if the problem are the float numbers, however is "number" value and seems accepted in config.

Answer 1

only thing I could determine, was that the first line of the html string,
needs to be on the same line as the return statement...

return '<div style="z-index:1000000; background:#9daab6; padding:10px;">' +

vs. the following line...

return 
  '<div style="z-index:1000000; background:#9daab6; padding:10px;">' +

see following working snippet...

google.charts.load('current', {
  packages: ['treemap']
}).then(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
   ['Customer', 'Region', 'Sales', 'Score'],
   ['America',   null,         0,        0],
   ['Apple',     'America',    0,        0],
   ['VW',        'America',    0,        0],
   ['Costco',    'America',    0,        0],
   ['Amazon',    'America',    0,        0],
   ['1-Apple',   'Apple',      115.5,    0.70],
   ['2-Apple',   'Apple',      115.5,    0.70],
   ['3-Apple',   'Apple',      52.5,     0.70],
   ['1-VW',      'VW',         49,       0.45],
   ['2-VW',      'VW',         9.4,      0.39],
   ['3-VW',      'VW',         7.4,      0.35],
   ['1-Costco',  'Costco',     5.2,      0.3],
   ['1-Amazon',  'Amazon',     4.8,      0.3],
  ]);

  var options = {
    headerColor: '#dfe4e9',
    highlightOnMouseOver: true,
    maxDepth: 1,
    maxPostDepth: 4,
    minHighlightColor: '#FF8B30',
    midHighlightColor: '#FFC03C',
    maxHighlightColor: '#FFE730',
    minColor: '#29ECB4',
    midColor: '#00ACED',
    maxColor: '#09F6A9',
    headerHeight: 25,
    showScale: false,
    useWeightedAverageForAggregation: true,
    showTooltips: true,
    generateTooltip: showFullTooltip
  };

  var tree = new google.visualization.TreeMap(document.getElementById('grph'));
  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
   return '<div style="z-index:1000000; background:#9daab6; padding:10px;">' +
      '<span><b>' + data.getValue(row, 0) + '</b>, ' + data.getValue(row, 1) + 
      ', ' + data.getValue(row, 2) + ', ' + data.getValue(row, 3) + '</span>' + 
      '<br>' +
      'Datatable row: ' + row + 
      '<br>' +
      data.getColumnLabel(2) + ' Sales: ' + size + 
      '<br>' +
      data.getColumnLabel(3) + ': ' + value + 
      ' </div>';
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="grph"></div>

notes: if you're using the jsapi loader, it isn't needed, see above snippet...
and there is a missing comma after the following data...

['3-VW',      'VW',         7.4,      0.35]

but probably only in the snippet, not your code, or it wouldn't run...