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

Created on 27 Mar 2018 · 10Comments · Source: c3js/c3

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

Source

kenkyoung

👍4

Most helpful comment

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.

ecupaio on 17 Apr 2018

👍10

All 10 comments

+1
v0.5.0 seem to have broke pie, donut and gauge charts. Even default events like highlight on hover not working.

novarol on 3 Apr 2018

any update on this issue? Have the same problem on gauge chart.

albayraktaroglu on 10 Apr 2018

does anyone know what version onclick for donut and pie isn't broken?

ecupaio on 17 Apr 2018

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

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

ecupaio on 17 Apr 2018

👍10

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

screen shot 2018-04-27 at 5 00 47 pm