Onclick isn't working for pie charts in C3 version 0.5.1
See original GitHub issue- 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");
}
}
Issue Analytics
- State:
- Created 5 years ago
- Reactions:4
- Comments:10 (2 by maintainers)
Top Results From Across the Web
Setting onclick event to pie chart on c3-angular-directive like ...
How can I set an onclick event to pie chart using c3-angular-directive? The idea is calling console.log after clicking in a pie piece....
Read more >How to add Onclick event to c3 chart in Shiny, R?
I want to add onclick event to c3.js chart in Shiny R. I`v read this article with c3 examples and try to do...
Read more >Visualization: Scatter Chart - Google Developers
Overview. Scatter charts plot points on a graph. When the user hovers over the points, tooltips are displayed with more information. Google scatter...
Read more >Chapter 5. Layouts - D3.js in Action, Second Edition
This chapter covers. Understanding histogram and pie chart layouts; Learning about simple tweening; Working with stack layouts; Using Sankey diagrams and word ...
Read more >Bug listing with status RESOLVED with resolution TEST ...
configure isn't using config options" status:RESOLVED ... smarteiffel package (version 1.1)" status:RESOLVED resolution:TEST-REQUEST severity:enhancement ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I found a work around in the meantime. Add the following to your css:
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.
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 thisTo 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.