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, May 03 '16 at 07:40

score 7 · Accepted Answer · answered May 05 '16 at 05:13

7

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.

answered May 05 '16 at 05:13

goneToHappyLand

166
9

First, Tanks for your answer, Second, Are youe sure it works for you? as i checked (also in the example attached to my quary) the 'tooltip' property can defined one time in 'options' level, not for each series. – Stack Overflow May 05 '16 at 05:22
yes, it works perfectly for me, I am using this in my app. To disable the tooltip dynamically. 'options.series[indexOfLine].tooltip = false;' Please refer this http://stackoverflow.com/questions/8223145/remove-hover-tooltip-from-google-visualization-pie-chart-core-chart link. – goneToHappyLand May 05 '16 at 07:54
Sorry about the link confusion. The link provided in above comment is not the one I wanted to share Pls refer this link http://stackoverflow.com/questions/22627791/google-chart-line-chart-turn-off-tooltip-for-a-single-column – goneToHappyLand May 05 '16 at 08:16
Thanks twice, But as i see in the bellow link, all the answers using "enableInteractivity: false", its is the effects property, i dont want to use it becose its disable also the series selection option. – Stack Overflow May 05 '16 at 08:35
1

i modified it to the code mentioned in above my answer : from tooltip: 'none' to tooltip:'false' without using enableInteractivity attribute. Since I also expecting the same behavior like u r expecting in ur application. – goneToHappyLand May 05 '16 at 08:49
Hope that helped you – goneToHappyLand May 06 '16 at 11:07

Remove hover tooltip from specific series Google Visualization line chart

1 Answers1