Removing tooltip for one part of piechart google charts

Question

I have a structure of chart like this:-

               data: {
                    cols: [
                        {
                            id: 'Type',
                            type: 'string'
                        },
                        {
                            id: 'percentage',
                            type: 'number'
                        },
                        {
                            id: 'tooltip',
                            role: 'tooltip',
                            type: 'string',
                            p: { html: true }
                        }
                    ],
                    rows: [
                        {
                            c: [
                                {
                                    v: typeA
                                },
                                {
                                    v: 20
                                },
                                {
                                    v: 'my Tooltip content'
                                }
                            ]
                        },
                        {
                            c: [
                                {
                                    v: 'typeB'
                                },
                                {
                                    v: 80
                                }
                            ]
                        }
                    ]
                },

I want to disable the tooptip only for typeB and but should work with typeA. Is this possible in google charts? (tooptip trigger:none option disable it for whole chart)

Answer 1

when using custom tooltips, if the tooltip column is null or ''

the chart will replace with the default tooltip

to avoid, provide a custom tooltip that is hidden with css

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Type', 'Percent'],
      ['typeA', 20],
      ['typeB', 80]
    ]);

    // add tooltip column
    data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    // build tooltip
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      switch (data.getValue(i, 0)) {

        // set visible tooltip
        case 'typeA':
          data.setValue(i, 2,
            '<div class="ggl-tooltip"><div><span>' +
            data.getValue(i, 0) + '</span></div><div>' +
            data.getValue(i, 1) + '</div></div>'
          );
          break;

        // set hidden tooltip
        case 'typeB':
          data.setValue(i, 2, '<div class="hdn-tooltip"><div>');
          break;
      }
    }

    var container = document.getElementById('chart_div');
    var pieChart = new google.visualization.PieChart(container);
    pieChart.draw(data, {
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['corechart']
});

.hdn-tooltip {
  display: none;
  visibility: hidden;
}

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip div {
  padding-top: 6px;
}

.ggl-tooltip span {
  font-weight: bold;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>