Google Chart Scatter Plot Confusion Table Tooltip

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['', '0%', {role:'annotation'}, '25%', {role:'annotation'}, '50%',{ role: 'annotation'}, '75%', {role:'annotation'}, '100%', {
          role: 'annotation'
        }, {
          role: 'style'
        }],
        ['Mood', 3, 'MNO', 7, 'JKL', 20,'GHI', 25, 'DEF', 45, 'ABC', '']
      ]);

      var options = {
        isStacked: true,
        hAxis: {
          minValue: 0
        },
        series: {
          0:{color:'#222'},
          1:{color:'#555'},
          2:{color:'#888'},
          3:{color:'#AAA'},
          4:{color:'#EEE'}
        }
      };

      var chart = new google.visualization.BarChart(document.getElementById('mood_chart'));
      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="mood_chart"></div>
</body>

</html>

/* Styles go here */

.google-visualization-tooltip table, tr, th, td{
  border:1px solid black;
  border-collapse:collapse;
}

# Stack Overflow Answer

Answer to [this question](http://stackoverflow.com/questions/31022421/google-visualization-api-bar-chart-isstacked-percent-not-working) on Stack Overflow.