JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="chart-area" width="400" height="400"></canvas>
JavaScript
var pieData = [{
value: 100,
color:"#F7464A",
highlight: "#FF5A5E",
label: "New",
},
{
value: 220,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "In Progress"
}];
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData,{
animationSteps: 100,
animationEasing: 'easeInOutQuart',
scaleShowLabels : true,
// Draw the tooltips when the animation is completed
onAnimationComplete: function() {
this.showTooltip(this.segments);
},
// Block the mouse tooltip events so the tooltips
// won't disapear on mouse events
tooltipEvents: []
});