Highchart Z-Index practice not functioning

Question

I have a highcharts scenario wherein my outer PIE and Inner PIE labels are getting overlapped for few cases.

Now, my requirement is that person

1. can click on PIE labels
2. can click on Outer Pie also.

Now the problem is that when someone click on overlapped area of OUTER PIE and one of the labels i.e. on area of 8% then click event of label is getting fired not of above Outer PIE.

I tried giving Z-index to series and labels but no help.

Answer 1

You can disable events for dataLabels in CSS:

.highcharts-data-labels {
  pointer-events: none;
}

And demo: http://jsfiddle.net/gdkazb9q/4/

Full solution for the above case by @Gags :

events:{
  mouseover: function() { 
    $(".highcharts-data-labels").css("pointer-events","none") 
  },
  mouseout: function() { 
    $(".highcharts-data-labels").css("pointer-events","visibleStroke") }
  }
}