question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:closed
  • Created 5 years ago
  • Reactions:4
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

10reactions
ecupaiocommented, Apr 17, 2018

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.

1reaction
kcrwfrdcommented, Apr 28, 2018

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

To this

screen shot 2018-04-27 at 5 01 03 pm

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found