google.charts.load('current', { packages: ['corechart', 'line'] });
function DrawChart(){
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', '%97');
data.addColumn('number', '%85');
data.addColumn('number', '%50');
data.addColumn('number', '%15');
data.addColumn('number', '%3');
data.addColumn('number', 'Points');
data.addColumn({ type: 'string', role: 'tooltip', p: { 'html': true } });
data.addRow([1, 10, 8, 7, 4, 3, null, null]);
data.addRow([2, 8, 7, 6, 3, 1, null, null]);
data.addRow([3, 11, 9, 7, 5, 2, null, null]);
data.addRow([4, 12, 8, 6.5, 4, 2, null, null]);
data.addRow([5, 10, 9, 8, 2, 1, null, null]);
data.addRow([1.5, null, null, null, null, null, 8, '<b style=color:red>tooltip</b>']);
data.addRow([2.7, null, null, null, null, null, 3, '<b style=color:green>tooltip</b>']);
data.addRow([5.2, null, null, null, null, null, 2, '<b style=color:blue>tooltip</b>']);
var options = {
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
keepInBounds: true,
},
crosshair: {
color: '#330066',
trigger: 'selection'
},
tooltip: {
isHtml: true,
},
colors: ['#ff2727', '#ffcc00', '#2c962c', '#ffcc00', '#ff2727', '#000000'],
series: {
5: {
lineWidth: 1,
pointSize: 4,
visibleInLegend: false,
enableInteractivity: true
}
},
// enableInteractivity: false,
pointSize: 0,
lineWidth: 1,
};
var chart = new window.google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" value="Draw Chart" onclick="DrawChart()"/>
<div id="chart_div"></div>
I am using google line chart, options like this:
var options = {
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
keepInBounds: true,
},
crosshair: {
color: '#330066',
trigger: 'selection'
},
tooltip: {
isHtml: true,
},
series = {
7: {
lineWidth: 1,
pointSize: 3,
visibleInLegend: false,
}
},
pointSize: 0,
lineWidth: 1,
};
I try to remove the auto tooltip from specific series, I had see the question Remove hover tooltip from Google Visualization pie chart (core chart) but the answers not appropriate for me, i cant set:
enableInteractivity = false
because I did not want to disable the series selection.
Can you help?
Specifies what will be shown in the tooltip. Opens the Add Tooltip Value dialog, where you can add the content from another column, hierarchy, or any custom expression to be shown in the tooltip. You can also use images in tooltips.
To disable tool-tip for particular line or area, try this -
Option {
series{
0: { tooltip : false}, // disable tooltip
1: { tooltip : true}, // enable tooltip
2: { tooltip : false},
3: { tooltip : true}
}
}
This worked for me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With