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: falsevar chart = new CanvasJS.Chart("container",
{
.
.
data: [{
dataPoints: [
{ y: 10, label: "label1", exploded: true },
],
},
]
.
.
});
chart.render();
Also See:
16 Comments
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 !
(the goal is to have only one exploded item at the same time, the selected one)
Here is a jsfiddle that I created to do the same…. http://jsfiddle.net/canvasjs/pAYQR/ (updated based on Yu’s code)
Am just curious to know how you were trying to do the same. Can you please post your jsfiddle if possible. That will let me improve the API in future versions…
While working on my problems with explosion with canvas.js, I find that removing: if(!dataPoint.exploded) from http://jsfiddle.net/canvasjs/pAYQR/ seem to provide the answer to Emmanuel’s goal of having only one exploded item at any one time. See http://jsfiddle.net/8VTQv/
My own issue is with disabling the explosion. How can I stop the user from clicking and exploding other items beside the one I’ve chosen to explode to highlight the item?
i want to know how can i reduce the chart width and height
Jayant,
Do you mean the size of doughnut or the entire chart?
problem is sort out thanks for asking. But i got new problem i want to change axis-x and axis-y font color i still not found any solution
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();
}
Ankit,
You should use “#” with the color code. Like ” #F8B8BC”.
thanks Anjali.. :) it worked..
How to reduce(customize) radius of daughnut chart ?
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.
Hi, I searched in documentation, but I had no luck, the question is: has anyway to disabled the explode?
Thanks
Lenon Bordini,
Disabling the explode will be available on next release of CanvasJS. Currently you can set interactivityEnabled to false or you can follow this example to disable it.
Thank you a lot, I’ll wait for the next release.
Lenon,
explodeOnClick feature is now available in version 1.8.1 beta.