exploded: Boolean

Sets the exploded value of dataPoint. It is applicable only in case of Pie and Doughnut Charts. This property causes the Pie/Doughnut slice to separate out.


Default: true
Example: true, false

Notes
  • Exploding works by default when dataPoint is clicked.
  • If click events are attached to any dataPoint or dataSeries, then click event is followed by exploding.


var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 data: [{
  dataPoints: [
   { y: 10,  label: "label1", exploded: true },

  ],

  },
 ]
 .
 .
});
chart.render();


Try it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 16

  1. Hi, I try to explode/un-explode e.dataPoint when the user select and item but it’s not working…
    Is it a normal behaviour ? Can’t we, once the graph is rendered, manually trigger the explode/un-explode animation ?
    Thank you in advance for you answer !

  2. Hello following code is not displaying colors on mozilla and IE . Can some one help me in finding out the error.
    This is displaying proper colors on Safari and Chrome.

    window.onload = function () {
    var chart_1= new CanvasJS.Chart(“chartContainer”, {
    title:{
    text: ‘graph 5’
    },
    axisY:{
    interlacedColor: ‘#fbfbfb’,
    tickLength: 1
    },
    axisX:{
    gridColor: “Silver”,
    tickColor: “silver”,
    valueFormatString: “DD-MM-YYYY hh:mm”,
    title:’Date Time’,
    labelAngle: 100
    },
    data: [

    {
    type: “line”,
    lineThickness:2,
    margin: 10,
    showInLegend: true,
    name: ‘Height’,
    color: “FFB74F”,
    dataPoints: [{ x : new Date(1410782100000) , y : 1.75 },{ x : new Date(1412430240000) , y : 2.0 },{ x : new Date(1401615420000) , y : 3.0 },{ x : new Date(1412171100000) , y : 3.0 },{ x : new Date(1417088100000) , y : 1.0 },{ x : new Date(1415016180000) , y : 21.0 },{ x : new Date(1412155980000) , y : 1.75 },{ x : new Date(1412343600000) , y : 2.0 },{ x : new Date(1412343600000) , y : 2.0 },{ x : new Date(1413380580000) , y : 2.0 },{ x : new Date(1412170740000) , y : 2.0 },{ x : new Date(1254404640000) , y : 3.0 },{ x : new Date(1415016180000) , y : 4.0 },{ x : new Date(1412430000000) , y : 3.0 },{ x : new Date(1413380460000) , y : 2.0 },{ x : new Date(1415016180000) , y : 43.0 }]

    },

    {
    type: “line”,
    lineThickness:2,
    margin: 10,
    showInLegend: true,
    name: ‘Weight’,
    color: “F8B8BC”,
    dataPoints: [{ x : new Date(1410782100000) , y : 60.0 },{ x : new Date(1412430240000) , y : 2.0 },{ x : new Date(1401615420000) , y : 300.0 },{ x : new Date(1412171100000) , y : 90.0 },{ x : new Date(1417088100000) , y : 100.0 },{ x : new Date(1415016180000) , y : 451.0 },{ x : new Date(1412155980000) , y : 105.0 },{ x : new Date(1412343600000) , y : 120.0 },{ x : new Date(1412343600000) , y : 120.0 },{ x : new Date(1413380580000) , y : 43.0 },{ x : new Date(1412170740000) , y : 180.0 },{ x : new Date(1254404640000) , y : 67.0 },{ x : new Date(1415016180000) , y : 43.0 },{ x : new Date(1412430000000) , y : 43.0 },{ x : new Date(1413380460000) , y : 43.0 },{ x : new Date(1415016180000) , y : 424.0 }]

    }

    ]
    });

    chart_1.render();

    }

    • We have just released v1.8.0 Beta which supports Syncing Multiple Chart Ranges, Vertical Zooming & Controlling Pie/Doughnut Radius. Please refer to the release blog for more information.

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.