Exploded property on Pie Chart

[Jason1028]

I am using MSSQL and ASP.NET with MVC for my project. How can I set only once slice of my pie chart with the exploded property (I only want the visa slice explode out when the chart is rendered). I have created a sample project and sample database in this link. https://1drv.ms/u/s!ArY1OZOnknm5nxzpvj-0deDl31ED?e=bshIXI

[Manoj Mohan]

@jason1028,

Setting exploded property to true will explode a slice of pie/doughnut on chart-render.
As you are reading data from database, you can add exploded property by checking the label. Please refer the code-snippet below. Adding the below snippet just before calling chart.render() should work fine in this case.

for(var i = 0; i < chart.options.data[0].dataPoints.length; i++)
    if(chart.options.data[0].dataPoints[i].label === "Visa")
        chart.options.data[0].dataPoints[i].exploded = true;

—-
Manoj Mohan
Team CanvasJS

[Jason1028]

It works perfectly. Thank you so much!

[hoopstagee]

I need something similar but I am working in React. Can you tell me how to call chart.render() in React? Do I need to use this line ” onRef={ref => this.chart = ref}”. If so I do not understand.

Thank you

[Vishwas R]

@hoopstagee,

You can get the instance of the chart by passing onRef = {ref => chart = ref} props to the Chart Component. Later you can call chart.render();. Please refer documentation for more information about CanvasJS React Component & the props available.

If you are looking to explode just one slice, you can set exploded property of all the dataPoints to false except the currently clicked slice. Please take a look at this StackBlitz code for an example on the same.

—
Vishwas R
Team CanvasJS