Home forums Chart Support Exploded property on Pie Chart

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #25713

    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



    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


    It works perfectly. Thank you so much!


    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



    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.