JSFiddle - React, Tailwind, and code Playground

by Aaron Bickle

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.js"></script>
<canvas id="myChart"></canvas>

CSS

canvas {
    width: 400px;
    height: 400px;
    border: solid thin black;
}

JavaScript

var data = [
    {
        value: 80,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 20,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    }
];

var ctx = document.getElementById('myChart').getContext('2d');

var myNewChart = new Chart(ctx).Doughnut(data, {
    animationEasing: "easeOutCirc",
    onAnimationComplete: function () {
        ctx.font = "24px Verdana";
        ctx.fillStyle = "#000000";
        ctx.fillText(data[0].value + '%', ctx.canvas.width/2-25, ctx.canvas.height/2 + 10);
    }
});