title: Google visualization: Stack columns. Issues with HTML custom tooltips
body: <p>All my questions/problems are related to this Codepen where I developed a stacked column bar chart. Code bellow.
  <a href="http://codepen.io/anon/pen/xLIuB" rel="nofollow">http://codepen.io/anon/pen/xLIuB</a> </p>
  
  <p><strong>Issue 1 :</strong>
  I might have found a bug on custom tooltips. As you can see, for small groups (the ones where the there is not enoght space to put the annotation) the custom tooltip is not applied. Is there a way to solve it ?</p>
  
  <p><strong>Issue 2:</strong>
  I don't understand why the HTML tooltip isn't enabled even if I followed the documentation. <a href="https://developers.google.com/chart/interactive/docs/customizing_tooltip_content?hl=fr" rel="nofollow">https://developers.google.com/chart/interactive/docs/customizing_tooltip_content?hl=fr</a></p>
  
  <p><strong>Issue 3:</strong>
  As you can see, it's absolutly impossible to click on the tooltip action because the tooltip is too far. Is there something to fix it ?</p>
  
  <p><strong>Question:</strong>
  I will need to hide/show series by clicking on the legend. Is there something not documented to do it ? I found this way <a href="http://jsfiddle.net/asgallant/6gz2Q/" rel="nofollow">http://jsfiddle.net/asgallant/6gz2Q/</a> but it's a bit ugly.</p>
  
  <p><strong>Advices appreciated :</strong>
  I take any advice to simply the google chart related code. Specially for formatting because it's seems that we have to format interger to get (X,XXX.X values format) even if the language is set to <em>en</em>. Am I right ?
  Don't worry about the javascritp syntax, it will be rewritten when I will integrate it in my application. This is just a mock.</p>
  
  <pre><code>google.load("visualization", "1", {packages:["corechart"], language: "en"});
  google.setOnLoadCallback(drawChart);
  
  //Input data
  var data = [
      ['API Category', 'Social', 'Music', 'File Sharing', 'Storage', 'Weather'],
      ['2011', 9000, 5300, 1200, 1600,  6000 ],
      ['2012', 1005, 3400, 2600,  3600,  4009 ],
      ['2013', 6009, 2700,  2200,  1000,  1500 ]
    ];
  var aggregates = ["Category", "Year"];
  var metrics = ["Url count"];
  
  function drawChart() {
    var options = {
      width: 1000,
      height: 550,
      legend: { position: 'top', maxLines: 3, textStyle: {color: 'black', fontSize: 16 } },
      isStacked: true,
      tooltip: { isHtml: true }
    };
  
    var dataTable = google.visualization.arrayToDataTable(data);
  
    //Formatters
    var intergerFormatter = new google.visualization.NumberFormat({
      groupingSymbol: ",",
      fractionDigits: 0
    });
    for(var i=0; i&lt;data[0].length; i++){
      intergerFormatter.format(dataTable, i);
    }
  
    var view = new google.visualization.DataView(dataTable);
    var cols = [0];
    for(var i=1; i&lt;data[0].length; i++){
        cols.push({
          sourceColumn: i,
          type: "number",
          label: data[0][i]
        });
        cols.push({ 
          calc: "stringify",
          sourceColumn: i,
          type: "string",
          role: "annotation"
        });
        cols.push({ 
          calc: createTooltip(i),
          /*(function(i) {
                  return function(dataTable, row){
                    return "Url count" + dataTable.getValue(row, i)+"&lt;/b&gt;";
                };
             })(i),*/
          type: "string",
          role: "tooltip",
          p: {html: true}
        });
    }
    view.setColumns(cols);
  
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  
    chart.setAction({
        id: 'increase',
        text: 'View details in explorer',
        action: function() {
          selection = chart.getSelection();
          //TODO
        }
      });
  
    chart.draw(view, options);
  
    function createTooltip(col){
      return function(dataTable, row){
        var html = "&lt;div&gt;&lt;/div&gt;";
        html += aggregates[0] + ": " + dataTable.getColumnLabel(col) + "\n";
        html += aggregates[1] + ": " + dataTable.getValue(row, 0) + "\n";
        html += metrics[0] + ": " + intergerFormatter.formatValue(dataTable.getValue(row, col)) + "\n";
        return html;
      };
    }
  }
  </code></pre>