Onclick isn't working for pie charts in C3 version 0.5.1

• C3 version:v0.5.1
• D3 version:4.13.0
• Browser:Chrome
• OS:MacOS

When using utilizing Pie Charts, the behavior seems to have changed. Currently, onclick, mouseover, and mouseout events added to the data element are not working. It also isn’t working in the example at http://c3js.org/samples/chart_pie.html.

code snippet:

data:{
columns: data,
type: 'pie',
onclick:function(d,element){
console.log("Clicked");
}
}

[ecupaio]

I found a work around in the meantime. Add the following to your css:

.c3-event-rects {
   display: none;
}

one of the shapes was blocking the events from firing since it’s stacked on top of the other shapes that make your donut/pie chart. I haven’t encountered any errors with this solution yet, but I will update if I do.

[kcrwfrd]

Having the same problem in C3 0.5.4, and you can see the bug here: http://c3js.org/samples/chart_donut.html

@ecupaio’s solution is working for me on a pie chart, but not a bar chart.

The real problem seems to be that .c3-event-rects is rendered as the last DOM node, when it should be the first. For example, on the donut chart demo linked above, if you use the Chrome debugger to reorder the nodes from this

To this

Mouse events will work again.

It seems like this is how the DOM nodes were ordered in v0.4.22 of C3, before we noticed this bug occurring.