please find below the code snippet:
<!DOCTYPE HTML>
<html dir=”rtl”>
<head>
<script type=”text/javascript”>
window.onload = function () {
var dps = [{y: 500, label: “Structural”}, {y: 300, label: “Civil”}, {y: 1800, label: “Architects”}];
var dps1 = [{y: 2000, label: “Structural”}, {y: 500, label: “Civil”}, {y: 300, label: “Architects”}];
var sliceval = 2000/5;
CanvasJS.addColorSet(“greenShades”,
[//colorSet Array
“#B378D3”,
“#800080”
]);
var chart = new CanvasJS.Chart(“chartContainer”,
{
colorSet: “greenShades”,
title:{
text: “Dashboard”
},
axisX:{
title: “Employee Groups”,
labelAngle: -50,
gridColor: “lightblue”
},
axisY:{
title: “Applications”,
interval: sliceval,
gridColor: “lightgreen”
},
data: [
{
type: “stackedColumn”,
legendText: “On time”,
indexLabel: “{y}”,
showInLegend: “true”,
labelAutoFit: “true”,
indexLabelPlacement: “inside”,
indexLabelFontColor: “white”,
dataPoints: dps
},
{
type: “stackedColumn”,
legendText: “Delayed”,
showInLegend: “true”,
indexLabel: “{y}”,
labelAutoFit: “true”,
indexLabelPlacement: “inside”,
indexLabelFontColor: “white”,
dataPoints: dps1
}
]
});
chart.render();
}
</script>
<script type=”text/javascript” src=”canvasjs.min.js”></script></head>
<body>
<div id=”chartContainer” style=”height: 300px; width: 100%;”></div>
</body>
</html>
