disable click event on google pie chart

Question

I am using google pie chart where i want to disable the click event on the slices of pie. This is my code:

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['State Group', 'Names'],
      ['Andhra Pradesh', 9],
      ['Madhya Pradesh', 4.5],
      ['Tamilnadu / Pondicherry', 7],
      ['Karnataka', 2.5],
      ['Others', 1]
    ]);

    var options = {
      // title: 'My Daily Activities',
      pieSliceText: 'none',
      pieHole: 0.80,
          slices: {  0: {color: '#46B1C9'},
                1: {color: '#84C0C6'},
                2: {color: '#F37992'},
                3: {color: '#6A6478'},
                          4: {color: '#C9CCCA'},
      },
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

    chart.draw(data, options);
  }

i have used this code to disable to click event, but somehow it is not working!

google.visualization.events.addListener(chart, 'ready', function(){
            $("#donutchart").unbind("click");
    });

Answer 1

 google.visualization.events.addListener(chart, 'ready', function(){
            $("#donutchart").unbind("click").click(onClick);

Try this ...

Answer 2

I know this a few years past but I was struggling to figure this out and came up with a form of a solution.

My issue was that I am customizing my tooltips with the HTML feature, but when I clicked on a slice of the graph, the css for the tooltips would get wiped clean.

I was able to isolate the selection event with the method that google charts provide for you (getSelection(), see docs here), which was actually confusing because they place this directly on the global window.

Once I figured that out I actually passed the event to a custom handler and did a bit of jury-rigging to not disable the click/selection event (because that doesn't seem possible), but to carry over my custom CSS (this logic could be used in a number of ways, outside of my use case)

You can see my code below in which I use the returned event row and matched it to some hardcoded data (name, color) to change those tooltips CSS. Then once I was able to capture and log the select info, I passed that on to the handler to do the same. I also had to use an object as a form of state because for some reason when you click the chart slice twice, google charts returns an empty array instead of an array with an event object.

Hope this helps anyone in the future!

google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
 var rows = [
  ['Savings Category', 'Savings'],
  ['Trade Savings', 11, ],
  ['Shipping Savings', 20],
  ['Bulk Savings', 12],
  ['Promo Savings', 12],
 ];

 var data = google.visualization.arrayToDataTable(rows);

 var colors = {
  "Trade Savings": '#0066a7',
  "Shipping Savings": '#54c0e9',
  "Bulk Savings": '#cccccc',
  "Promo Savings": '#818181',
 }

 var options = {
  click:'event',
  pieHole: 0.8,
  legend: 'none',
  height: '90%',
  width: '90%',
  pieSliceText: 'none',
  backgroundColor: '#f8f5f3',
  colors: ['#0066a7', '#54c0e9', '#cccccc', '#818181'],
  chartArea: {
   height: '70%',
   width: '70%',
  },
  slices: [{offset: 0.05}, {offset: 0.05}, {offset: 0.05}, {offset: 0.05}],
  tooltip: {
   isHtml: true,
   text: "value",
   textStyle: { fontSize: 11},
   trigger: 'focus',
  },
 };

 var chart = new google.visualization.PieChart(document.getElementById('doughnut-chart'));
 chart.draw(data, options);

 google.visualization.events.addListener(chart, 'onmouseover', toolTipHandler)

 google.visualization.events.addListener(chart, 'select', selectHandler);

 function selectHandler() {
  toolTipHandler(chart.getSelection()[0])
 }

 var chartState = {
  selectedSlice: null
 }

 function toolTipHandler(e) {

  var currSlice;

  if (!e) {
   currSlice = chartState.selectedSlice
   chartState.selectedSlice = null
  }else{
   currSlice = rows[e.row + 1]
   chartState.selectedSlice = rows[e.row + 1]
  }

  if (currSlice[0] === "Bulk Savings"){

   $(".google-visualization-tooltip").css("border-bottom", "2px solid " + colors[currSlice[0]])
   $(".google-visualization-tooltip").css({
    "position": "relative",
    "top": "-100px",
    "left": "0",
    "z-index": "1",
    "width": "160px",
    "color": "yellow"
  })
  }
  else if (currSlice[0] === "Trade Savings"){
   $(".google-visualization-tooltip").css("border-bottom", "2px solid " + colors[currSlice[0]])
   $(".google-visualization-tooltip").css({
    "position": "relative",
    "top": "-206px",
    "bottom": "0",
    "left": "260px",
    "width": "30%",
    "z-index": "1",
    "text-align": "center",
   })
  }
  else if (currSlice[0] === "Shipping Savings"){
   $(".google-visualization-tooltip").css("border-bottom", "2px solid " + colors[currSlice[0]])
   $(".google-visualization-tooltip").css({
    "position": "relative",
    "top": "-113px",
    "left": "42px",
    "z-index": "1",
    "padding": "0 40px 0 0",
    "margin": "0 0 0 20px",
    "text-align": "center",
   })
  }
  else{
   $(".google-visualization-tooltip").css("border-top", "2px solid " + colors[currSlice[0]])
   $(".google-visualization-tooltip").css({
    "position": "relative",
    "top": "-125px",
    "left": "-10px",
    "z-index": "1",
    "padding": "0 40px 0 0",
    "margin": "0 0 0 20px",
    "text-align": "center",
   })
  }
 }
}

Answer 3

Ran into this issue myself. You can disable interactivity in your options with enableInteractivity: false, but that turns off the tooltips on hover, which you probably don't want.

Instead, this works:

...all your other chart code

var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(dataTable, options);

google.visualization.events.addListener(chart, 'click', function(e) {
  e.preventDefault();
})