Pie Chart with Zero values- CanvasJS
Pie Chart with Zero values- CanvasJS
HTML
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var ChartVal = "[{y:2169.47,legendText:'Financial',label:'Financial'},{y:736.41,legendText:'Automobile',label:'Automobile'},{y:529.87,legendText:'Communication',label:'Communication'},{y:450.19,legendText:'Energy',label:'Energy'},{y:427.84,legendText:'Others',label:'Others'},{y:260.83,legendText:'Services',label:'Services'},{y:237.59,legendText:'Cons Durable',label:'Cons Durable'},{y:227.31,legendText:'Engineering',label:'Engineering'},{y:181.83,legendText:'Technology',label:'Technology'},{y:163.53,legendText:'Construction',label:'Construction'},{y:5384.86,legendText:'Total',label:'Total'}]"
var objSecGraph = JSON.parse(strVal);
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Sector wise Asset Allocation"
},
animationEnabled: true,
legend:{
verticalAlign: "center",
horizontalAlign: "left",
fontSize: 12,
fontFamily: "Helvetica"
},
theme: "theme2",
data: [
{
type: "pie",
indexLabelFontFamily: "Garamond",
indexLabelFontSize: 12,
indexLabel: "{label} {y}%",
startAngle:-20,
showInLegend: true,
toolTipContent:"{legendText} {y}%",
dataPoints: ChartVal;
}
]
});
chart.render();