Set single point as active / show point and tooltip in Google line chart

Question

Im currently using a Google line chart to show two lines intercepting each other. I would like to show the data point and if possible the tooltip as well, where the lines are intercepting.

My current solution is to show all points and increase the size for the specific point, but actually I want to keep the functionality of seeing the points when pointing on them.

if (!intercept && oldVal > newVal) {
      intercept = true
      point = 'point { size: 10; }'
    }
data.push([i + 1, oldVal, newVal, point])

Answer 1

it looks like you're on the right track with the point size.

we have to set the pointSize config option to something greater than zero,
in order to be able to set the size in our style column.
but we can use something like --> pointSize: 0.1
to prevent the other points from being visible.

as for the tooltip, we can set the tooltip.trigger option to either...
'selection' or 'both'

tooltip: {
  trigger: 'both'
}

then we can use the chart's 'ready' event,
to set the chart's selection

google.visualization.events.addListener(chart, 'ready', function () {
  chart.setSelection([{row: intercept, column: 2}]);
});

with the above trigger option, when we set the chart's selection,
the tooltip will automatically appear.

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Old'); data.addColumn('number', 'New'); data.addColumn({type: 'string', role: 'style'}); var intercept = null; var rows = new Array(10); $.each(rows, function (i) { var oldVal = i; var newVal = rows.length - i; var point = null; if ((intercept === null) && (oldVal === newVal)) { intercept = i; point = 'point { size: 10; }'; } data.addRow([i + 1, oldVal, newVal, point]) }); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'ready', function () { chart.setSelection([{row: intercept, column: 2}]); }); chart.draw(data, { pointSize: 0.1, tooltip: { trigger: 'both' } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>