Google visualization stacked area chart: Add total to tooltip

Question

I'm using the google visualization api to create a stacked area chart. When a user hovers over a point inside the chart, I want it to show the total added sum of the points at that location, as well as the values of those points.

The second point, I can easily achieve by specifying the option focusTarget: 'category'. I would like to have, in a similar look-and-feel, an extra line in the tooltip for total.

I tried achieving this by adding an extra column named Total which would have a value of 0, but a tooltip equal to the sum. This however adds an empty line to both the legend and the chart itsself, which isn't visually appealing.

This feels to me as something that should be available out of the box, but I can't find any sollutions to this problem.

If anyone knows of a good way to fix this, please answer. Thanks in advance.

Can you elaborate on how you set the tooltip? I'm having trouble with that, code would help. — Stavros Korokithakis, May 09 '18 at 00:05

score 7 · Accepted Answer · answered Sep 09 '13 at 14:44

Since you already have the total column, you can make the line disappear and remove the total from the legend by using the series option:

series: {
    <series index of the total>: {
         lineWidth: 0,
         pointSize: 0,
         visibleInlegend: false
    }
}

I would recommend making the total column your first data series (column index 1, series index 0), as that puts it at the bottom of the chart where it won't interfere with your other series.

Though it seems like a bit of a hack, it did the job just fine. Thanks — Kippie, Sep 10 '13 at 08:14

score 0 · Answer 2 · answered Dec 03 '20 at 19:10

I had the same issue, and found this question and answer just as I was about to post my own question.

I was able to improve on this, though, by using a ComboChart. I put the totals in a line (which was hidden according to @asgallant's answer), so I could use the actual values there instead of 0.

Here's an example:

    google.charts.load('current', {'packages':['corechart'], 'language': 'nl'});
    google.charts.setOnLoadCallback(drawChart5);
    function drawChart5() {
      var data = google.visualization.arrayToDataTable([["","Totaal","Appels","Peren","Bananen","schatting"],[new Date(2020, 11, 1),2015,1223,614,178,null],[new Date(2020, 11, 2),1663,929,572,162,null],[new Date(2020, 11, 3),1449,570,429,127,323]]);
      var options = { title: 'Consumptie per dag, december 2020',
                      titleTextStyle: { fontSize: 15 },
                      type: 'columns',
                      width: 426,
                      height: 240,
                      legend: { position: 'bottom' },
                      series: { 0: { type: 'line', color: '#fff', lineWidth: 0, pointSize: 0, visibleInLegend: false }, 1: { color: '66aabb' }, 2: { color: '66ddee' }, 3: { color: 'bbeeff' }, 4: { color: 'e8f8ff' } },
                      vAxis: { viewWindowMode: 'maximized' },
                      chartArea: { width: '90%', left: 60, right: 20 },
                      bar: { groupWidth: '80%' },
                      focusTarget: 'category',
                      isStacked: true };
      var chart = new google.visualization.ComboChart(document.getElementById('chart5'));
      chart.draw(data, options);
    }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div style="display: inline-block; width: 426px; height: 240px;" id="chart5"></div>

Google visualization stacked area chart: Add total to tooltip

2 Answers2