Google Charts: is there a way to hide certain series from the tooltip?

Question

On https://www.mscha.org/knmi/summer_graph_wst.cgi?station=260&year=2022&month=0, I have several data series that I'm showing in the chart, but don't want to show in the tooltip (with focusTarget: 'category').

(The entries in the tooltip from (Warme dag) until (Grens tropische dag) are useless.)

You can easily exclude a data series from the legend, using visibleInLegend: false, but there doesn't seem to be a corresponding visibleInTooltip: false. Setting the label of the series to '' or null doesn't help either, it wil just show the data without a label.

If the value is null, then that series won't be listed in the tooltip. but that is not the case here, we have a value which is dramn in the chart. I tried (e.g.) { v: 20, f: null }, { v: 20, f: '' } and { v: 20, f: ' '} without the desired result.

Is there a way to do this, without writing the complete tooltip HTML myself?

user_5090771 · Answer

there are no standard config options that will hide a specific series from the tooltip.
but you can still accomplish without custom tooltips.
first, you will need to use html tooltips, by setting the following config option...

  tooltip: {
    isHtml: true
  }

when html tooltips are used, we can style the tooltips using CSS

with focusTarget: 'category', each tooltip row will be represented by class:
.google-visualization-tooltip-item, this includes the row for the x-axis

use the following CSS to hide a certain series from the tooltip.
the following will hide the second series 'y1'

#chart .google-visualization-tooltip-item:nth-child(3) {
  display: none;
  visibility: hidden;
}

see following working snippet...

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'y0', 'y1', 'y2'],
    [new Date(2020, 10, 13), 100, 50, 25],
    [new Date(2020, 10, 14), 110, 45, 5],
    [new Date(2020, 10, 15), 90, 40, 60],
    [new Date(2020, 10, 16), 80, 30, 10],
    [new Date(2020, 10, 17), 70, 20, 0],
    [new Date(2020, 10, 18), 60, 10, 0],
    [new Date(2020, 10, 19), 50, 5, 0]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    containerId: 'chart',
    dataTable: data,
    options: {
      focusTarget: 'category',
      chartArea: {
        left: 60,
        top: 12,
        right: 60,
        bottom: 72,
        height: '100%',
        width: '100%'
      },
      height: '100%',
      width: '100%',
      vAxes: {
        0: {
          titlePosition: 'none',
          textStyle: {
            color: '#febd02',
            bold: true,
            fontSize: 13,
          },
          format: '#',
          gridlines: {
            color: '#eaeaea',
            count: '5',
          },
          interpolateNulls: true,
        },
        1: {
          titlePosition: 'none',
          format: '#',
          gridlines: {
            color: 'transparent'
          },
          interpolateNulls: true,
        },
        2: {
          groupWidth: '100%',
          titlePosition: 'none',
          textStyle: {
            color: '#0284ff',
            bold: true,
            fontSize: 13,
          },
          format: 'decimal',
          gridlines: {
            color: 'transparent'
          },
        },
      },
      hAxis: {
        textStyle: {
          color: '#393939',
          bold: true,
          fontSize: 13,
        },
        format: 'dd MMM. yyyy',
        gridlines: {
          color: 'transparent'
        },
        ticks: data.getDistinctValues(0),
        viewWindow: data.getColumnRange(0)
      },
      series: {
        0: {
          targetAxisIndex: 0,
          type: 'area',
        },
        1: {
          type: 'line'
        },
        2: {
          targetAxisIndex: 2,
          type: 'bars',
          dataOpacity: 0.5,
        },
      },
      colors: [
        '#febd02',
        '#a5a5a5',
        '#0284ff',
      ],
      bar: {
        groupWidth: '35'
      },
      legend: {
        position: 'none'
      },
      tooltip: {
        isHtml: true,
        trigger: 'both'
      }
    },
  });
  chart.draw();
});

#chart .google-visualization-tooltip-item:nth-child(3) {
  display: none;
  visibility: hidden;
}

user_299242 · Answer

Actually, it turns out that you can skip certain series in a tooltip (with focusTarget: 'category'), simply by setting tooltip: false for the specific series.

This doesn't seem to be documented, but I found it in another script I wrote a few years ago. No idea how I found it out at that time.

For instance, on the mentioned page I am now using:

series: {
        0: { color: '#cccccc', labelInLegend: 'max.temp.', type: 'line' },
        1: { color: '#ffdd55', labelInLegend: 'warm', type: 'line', pointSize: 4 },
        2: { color: '#ffaa55', labelInLegend: 'zomers', type: 'line', pointSize: 5 },
        3: { color: '#ff4444', labelInLegend: 'tropisch', type: 'line', pointSize: 6 },
        4: { color: '#e8e8e8', labelInLegend: 'dagen', areaOpacity: 0.25, targetAxisIndex: 1 },
        5: { color: '#f8d680', labelInLegend: 'warm', areaOpacity: 0.25, targetAxisIndex: 1 },
        6: { color: '#ffbb88', labelInLegend: 'zomers', areaOpacity: 0.25, targetAxisIndex: 1 },
        7: { color: '#ff8888', labelInLegend: 'tropisch', areaOpacity: 0.25, targetAxisIndex: 1 },
        8: { color: '#ffdd55', visibleInLegend: false, tooltip: false, type: 'line', lineDashStyle: [4, 6] },
        9: { color: '#ffaa55', visibleInLegend: false, tooltip: false, type: 'line', lineDashStyle: [4, 6] },
        10: { color: '#ff4444', visibleInLegend: false, tooltip: false, type: 'line', lineDashStyle: [4, 6] },
    },

and that does the trick.

Google Charts: is there a way to hide certain series from the tooltip?

2 Answers