Remove hover tooltip from specific series Google Visualization line chart

Question

     
            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?

I try to simply my code, see attached jsfiddle.net, if i set enableInteractivity: false the tooltip hide, but the series selection action blocked. — Stack Overflow

goneToHappyLand goneToHappyLand · Accepted Answer · 2016-05-05T05:13:51

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.

Remove hover tooltip from specific series Google Visualization line chart

1 Answers