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