React pie chart slice not exploding when I implement ‘click’

[hoopstagee]

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.

• This topic was modified 3 years, 11 months ago by hoopstagee.

[Vishwas R]

@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

[hoopstagee]

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

• This reply was modified 3 years, 11 months ago by hoopstagee.
• This reply was modified 3 years, 11 months ago by hoopstagee.
• This reply was modified 3 years, 11 months ago by hoopstagee.
• This reply was modified 3 years, 11 months ago by hoopstagee.

[hoopstagee]

Here: https://stackblitz.com/edit/canvasjs-react-pie-chart-exploded-h436d3?file=child.js

[Manoj Mohan]

@hoopstagee,

Defining options as a member of class Chart should work fine in your case. Please take a look at this updated StackBlitz.

—-
Manoj Mohan
Team CanvasJS

[hoopstagee]

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

[Manoj Mohan]

@hoopstagee,

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.

—
Manoj Mohan
Team CanvasJS

[hoopstagee]

Thank you, I have recreated the problem. The label will change, but the slice will not expand. Can I refactor to make it work?

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

[Manoj Mohan]

@hoopstagee,

The StackBlitz example shared by you seems to be broken. Can you kindly share a working StackBlitz example?

—-
Manoj Mohan
Team CanvasJS

[hoopstagee]

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

• This reply was modified 3 years, 11 months ago by hoopstagee.
• This reply was modified 3 years, 11 months ago by hoopstagee.
• This reply was modified 3 years, 11 months ago by hoopstagee.

[hoopstagee]

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

[hoopstagee]

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

• This reply was modified 3 years, 11 months ago by hoopstagee.

[Manoj Mohan]

@hoopstagee,

Please take a look at this updated StackBlitz example.

—-
Manoj Mohan
Team CanvasJS

[hoopstagee]

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!

• This reply was modified 3 years, 11 months ago by hoopstagee.
• This reply was modified 3 years, 11 months ago by hoopstagee.

[Manoj Mohan]

@hoopstagee,

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.

—-
Manoj Mohan
Team CanvasJS