exploded: Boolean

Sets the exploded value of dataPoint. It is applicable only in case of Pie, Doughnut, Pyramid and Funnel Charts. This property causes the Pie/Doughnut/Pyramid/Funnel 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:    



If you have any questions, please feel free to ask in our forums.Ask Question

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.

If you have any questions, please feel free to ask in our forums. Ask Question