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.

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.

• javascript
• charts
• google-visualization

Share Follow asked Sep 9, 2013 at 13:47 KippieKippie 3,83044 gold badges2525 silver badges3838 bronze badges 1

• Can you elaborate on how you set the tooltip? I'm having trouble with that, code would help. – Stavros Korokithakis Commented May 9, 2018 at 0:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 remend 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.

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./charts/loader.js"></script>
<div style="display: inline-block; width: 426px; height: 240px;" id="chart5"></div>