You must be logged in to post your query.
Home › Forums › Chart Support › React pie chart slice not exploding when I implement ‘click’
Tagged: click event, pie chart, React
Hi, thank you for the great chart library. When I implement a ‘click’ event handler on my pie chart it changes the default explode behavior of the slice. It no longer explodes!
I need to be able to perform other actions when a slice is selected, but still have it explode. Why is this not working. How can I fix.
Thank you.
@hoopstagee,
It seems to be working fine, please take a look at this StackBlitz code for simple demo on the same.
If you are still facing issue, can you kindly create sample project reproducing the issue you are facing and share it with us, so that we can look into the code / chart-options being used, understand the scenario better and help you resolve?
— Vishwas R Team CanvasJS
Thank you, I have recreated the problem. The label will change, but the slice will not expand. Can I refactor to make it work?
I am having trouble providing the link, try this 2 parts
https://stackblitz.com/edit/ canvasjs-react-pie-chart-exploded-h436d3?file=child.js
Here: https://stackblitz.com/edit/canvasjs-react-pie-chart-exploded-h436d3?file=child.js
Defining options as a member of class Chart should work fine in your case. Please take a look at this updated StackBlitz.
options
Chart
—- Manoj Mohan Team CanvasJS
Thank you, My other problem is that I am passing my data from the parent (index.js), but the first time it’s []. So my chart is rendering nothing, then it doesn’t re-render with the new data because its not longer located in Render(). Should I re-render the chart with the ref? Can you tell me how? Or maybe there is another way?
Thank you
You can get reference to the chart instance by passing onRef = {ref => chart = ref} props to the component. This allows you to access all chart properties and methods including render(). Please refer documentation for more information.
onRef = {ref => chart = ref}
— Manoj Mohan Team CanvasJS
https://stackblitz.com/edit/canvasjs-react-pie-chart-exploded-h436d3-iv4qx6?file=child.js
https://stackblitz.com/edit/canvasjs-react-pie-chart-exploded-h436d3?file=child.js
The StackBlitz example shared by you seems to be broken. Can you kindly share a working StackBlitz example?
Hi, I have it working now, thank you!
My last question, the animation use to be a smooth transition to the new slice, now there is no transition, just open close.
Can this be fixed?
Thank you, here is the stack blitz. https://stackblitz.com/edit/canvasjs-react-pie-chart-exploded-h436d3?file=child.js https://canvasjs-react-pie-chart-exploded-h436d3.stackblitz.io
I’m trying to fix, it is the same as above in the thread.
Try: https://stackblitz.com/edit/canvasjs-react-pie-chart-exploded-h436d3?file=child.js
Thank you,
Can the animation effect be a smooth transition like the original? Now the transition is only open and close, but not smooth.
Thanks Try: https://stackblitz.com/edit/canvasjs-react-pie-chart-exploded-h436d3?file=child.js
Please take a look at this updated StackBlitz example.
Thank you, I am so close. Can you possibly show when the data from index.js is async and loads after the initial render, I am still unable to get mine to work ;-/
Thank you for the help!
Can you kindly share StackBlitz example reproducing the issue you facing on loading async data to chart so that we can understand your scenario better and help you with an appropriate solution.
You must be logged in to reply to this topic. Login/Register