JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<script src="https://raw.githubusercontent.com/Regaddi/Chart.js/bd5bff2cd4d782fa72a529f81a8e188fc2348d77/Chart.js"></script>
<canvas id="canvas" height="450" width="450"></canvas>

JavaScript

$(document).ready(function () {
    var pieData = [{
                value : 2,
                color : "#F38630",
                label : 'Manual',
                labelColor : 'white',
                labelFontSize : '16'
            },
                  {
                value : 230,
                color : "#F34353",
                label : 'Automatic',
                labelColor : 'white',
                labelFontSize : '16'
            }];

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData, { 		               
        animationSteps: 100,
 		animationEasing: 'easeInOutQuart'	});
});

//Chart.js 

 //Define the global Chart Variable as a class.
var Chart = function(context){

	var chart = this;
	
	
	//Easing functions adapted from Robert Penner's easing equations
	//http://www.robertpenner.com/easing/
	
	var animationOptions = {
		linear : function (t){
			return t;
		},
		easeInQuad: function (t) {
			return t*t;
		},
		easeOutQuad: function (t) {
			return -1 *t*(t-2);
		},
		easeInOutQuad: function (t) {
			if ((t/=1/2) < 1) return 1/2*t*t;
			return -1/2 * ((--t)*(t-2) - 1);
		},
		easeInCubic: function (t) {
			return t*t*t;
		},
		easeOutCubic: function (t) {
			return 1*((t=t/1-1)*t*t + 1);
		},
		easeInOutCubic: function (t) {
			if ((t/=1/2) < 1) return 1/2*t*t*t;
			return 1/2*((t-=2)*t*t + 2);
		},
		easeInQuart: function (t) {
			return t*t*t*t;
		},
		easeOutQuart: function (t) {
			return -1 * ((t=t/1-1)*t*t*t - 1);
		},
		easeInOutQuart: function (t) {
			if ((t/=1/2) < 1) return 1/2*t*t*t*t;
			return -1/2 * ((t-=2)*t*t*t - 2);
		},
		easeInQuint: function (t) {
			return 1*(t/=1)*t*t*t*t;
		},
		easeOutQuint: function (t) {
			return 1*((t=t/1-1)*t*t*t*t + 1);
		},
		easeInOutQuint: function (t) {
			if ((t/=1/2) < 1) return 1/2*t*t*t*t*t;
			return 1/2*((t-=2)*t*t*t*t + 2);
		},
		easeInSine: function (t) {
			return -1 * Math.cos(t/1 * (Math.PI/2)) + 1;
		},
		easeOutSine: function (t) {
			return 1...