CODEWITHSUNDEEP
javascriptjquerychartshighcharts
Gags
Gags

Reputation: 3839

Highchart Z-Index practice not functioning

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.

Upvotes: 1

Views: 155

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

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") }
  }
}

Upvotes: 1

Related Questions