JSFiddle - React, Tailwind, and code Playground

by Sachin Patel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<canvas id="chart-area" height="70px"></canvas>

JavaScript

var randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
};
var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [{
            data: [
                250,
                50,
                5,
                4,
                1,
                
            ],
            backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0', '#999999'],
            borderColor: 'white',
            borderWidth: 5,
        }]
    },
    showDatapoints: true,
    options: {
        tooltips: {
            enabled: false
        },
        pieceLabel: {
            render: 'label',
            arc: true,
            fontColor: '#000',
            position: 'outside'
        },
        responsive: true,
        legend: {
            position: 'bottom',
        },
        title: {
            display: true,
            text: 'Testing',
            fontSize: 20
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
});