javascriptchartsgoogle-visualizationvisualization

How to show all tooltips on selection of line in google charts


I am using Google Charts API to generate a line chart for some data. When I click on the line, the line gets highlighted. Also when I hover on any data point, the tooltip gets visible. However, I want to make it such that all tooltips of the line becomes visible on which I clicked. How to do so? Tooltip shown only on hover

I tried to know which function gets triggered on hover which makes the tooltips visible. But I couldn't get to that function. I have also tried tooltip: {trigger: 'both', selectionMode: 'multiple'} to no avail.


Solution

  • selectionMode: 'multiple' is only needed if you want to manually click / select more than one point and see the tooltip for each that is clicked.

    if you want to see all the tooltips when only one is clicked,
    you will need to listen for the 'select' event,
    determine which line / series is selected,
    then use chart method setSelection to select all the points.

    if you want a separate tooltip to appear above each point,
    you will need to add the following option.

     aggregationTarget: 'none'
    

    otherwise, the chart will group all the tooltip values into one tooltip.
    which could be good if the line is dense with points.
    if so, there are various options on how to group the tooltip values.

    aggregationTarget
    How multiple data selections are rolled up into tooltips:
    'category': Group selected data by x-value.
    'series': Group selected data by series.
    'auto': Group selected data by x-value if all selections have the same x-value, and by series otherwise.
    'none': Show only one tooltip per selection.
    aggregationTarget will often be used in tandem with selectionMode and tooltip.trigger

    see following working snippet...

    google.charts.load('current', {
      packages: ['corechart']
    }).then(function () {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004',  1000,      400],
        ['2005',  1170,      460],
        ['2006',  660,       1120],
        ['2007',  1030,      540]
      ]);
    
      var options = {
        aggregationTarget: 'none',
        title: 'Company Performance',
        tooltip: {
          trigger: 'both'
        }
      };
    
      var chart = new google.visualization.LineChart(document.getElementById('chart'));
    
      google.visualization.events.addListener(chart, 'select', function() {
        var selection = chart.getSelection();
        if (selection.length > 0) {
          // determine which line is selected
          var series = selection[0].column;
    
          // all points on the series to the selection
          selection = [];
          for (var index = 0; index < data.getNumberOfRows(); index++) {
            selection.push({
              column: series,
              row: index
            });
          }
    
          // select all points on the series
          chart.setSelection(selection);
        }
      });
    
      chart.draw(data, options);
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="chart"></div>