window.onload = function() {
var doughnutEl = document.getElementById("lottery-chart").getContext("2d");
var doughnut = new Chart(doughnutEl).Doughnut(
// Data
[
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Blue"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
],
// Options
{
segmentShowStroke : true,
segmentStrokeColor : "#fff",
segmentStrokeWidth : 2,
percentageInnerCutout : 50,
animationSteps : 100,
animationEasing : "easeOutBounce",
animateRotate : true,
animateScale : false,
responsive: true,
maintainAspectRatio: false,
showScale: true,
animateScale: true
});
};
body, html { overflow:hidden; }
#lottery-container {
border-style: solid;
border-width: 1px;
height: 400px;
padding: 0;
margin: 0 auto;
}
#lottery-item-container {
border-style: solid;
border-width: 1px;
width: 300px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div id="lottery-container" class="col-sm-12">
<div id="lottery-item-container">
<span id="lottery-item-val">1</span>
<span id="lottery-item-max-val">/50</span>
</div>
<canvas id="lottery-chart"></canvas>
</div>