JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

canvas.good {
    border: solid thick green;
}

JavaScript

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

var charts = document.getElementsByClassName('chart');
var ctx;

var animations = [
    "easeOutQuint"
];

$.each(charts, function (index, value) {
    ctx = value.getContext('2d');

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

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