Hey
.chart_parent {
position:relative;
height:400px;
}
.chart__data {
display: inline-block;
text-align: center;
vertical-align: middle;
font-size: 40px;
height: 40px;
width: 400px;
position: absolute;
top: 50%;
margin-top:-20px;
z-index: 100;
}
.chart__diagram { position: absolute; z-index: 10;}
// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");// This will get the first returned node in the jQuery collection.
/*var myNewChart = new Chart(ctx);*/
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
var options ={
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke : true,
//String - The colour of each segment stroke
segmentStrokeColor : "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth : 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout : 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps : 100,
//String - Animation easing effect
animationEasing : "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate : true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale : false,
//String - A legend template
legendTemplate : "-legend\"><% for (var i=0; i- \"><%if(segments[i].label){%><%=segments[i].label%><%}%>
<%}%>
"
};
var myDoughnutChart = new Chart(ctx).Doughnut(data,options);