Display Google Scatter chart tool tip for some points

Question

Is there any way i can display tool tip to always visible for some of the points in scatter chart as in image attached I have used

 tooltip: { trigger: 'selection' }

but it only makes it visible when user clicks on the point. I want three of the points to show tooltip all the time and other points to be disabled (not clickable).

WhiteHat WhiteHat · Accepted Answer · 2018-03-29T11:26:31

to display the tooltip without user interaction,
use chart method --> setSelection,
on the chart's 'ready' event,
and on the 'select' event to "disable"...

setSelection takes an array of objects,
each object should have a property for row and column from the data table...

chart.setSelection([
  {row: 0, column: 1},
  {row: 5, column: 1},
  {row: 11, column: 1}
]);

by default, the chart will display multiple selections in the same tooltip,
use the following option to display separate tooltips for each point...

aggregationTarget: 'none'

and the following option for multiple selections...

selectionMode: 'multiple',

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'v'],
    [10, 15],
    [15, 13],
    [18, 20],
    [24, 26],
    [34, 30],
    [40, 43],
    [49, 48],
    [50, 55],
    [65, 67],
    [70, 70],
    [72, 70],
    [73, 70],
    [80, 85]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(container);
  var options = {
    aggregationTarget: 'none',
    height: 400,
    legend: {
      position: 'top'
    },
    selectionMode: 'multiple',
    tooltip: {
      trigger: 'selection'
    }
  };

  google.visualization.events.addListener(chart, 'ready', setChartSelection);
  google.visualization.events.addListener(chart, 'select', setChartSelection);

  function setChartSelection() {
    chart.setSelection([
      {row: 0, column: 1},
      {row: 5, column: 1},
      {row: 11, column: 1}
    ]);
  }


  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Display Google Scatter chart tool tip for some points

1 Answers