JSFiddle - React, Tailwind, and code Playground

by Amir Danish

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<canvas id="myApplicationChart" width="400" height="400" class="chart chart-pie">
     </canvas>

JavaScript

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

   // defined random defult data here
   var data = [
     ranData(5, 40),
     ranData(40, 80),
     ranData(10, 50),
     ranData(21, 80),
     ranData(100, 120),
     ranData(230, 250),
     ranData(100, 200),
   ];

   var myApplicationChart = new Chart(ctx, {
     type: 'doughnut',
     data: {
       labels: ['Download', 'Facebook', 'YouTube', 'Google', 'Twitter', 'Game', 'Others'],
       datasets: [{
         label: 'Expenditures',
         data: data,
         borderColor: [
           "#FFFFFF",
           "#FFFFFF",
           "#FFFFFF",
           "#FFFFFF",
           "#FFFFFF",
           "#FFFFFF"
         ],
         backgroundColor: [
           "#FF6380",
           "#36A2E0",
           "#FFCE50",
           "#339905",
           "#ff6630",
           "#cc0090",
           "#FFCE50"
         ],
         hoverBackgroundColor: [
           "#FF6380",
           "#36A2E0",
           "#FFCE50",
           "#339905",
           "#ff6630",
           "#cc0090",
           "#FFCE50"
         ],
         borderWidth: 1,
         hoverBorderWidth: 1,
       }]
     },
     options: {
       responsive: true,
       animateRotate: true,
       legend: {
         display: true,
         position: "bottom",
         usePointStyle: true,
         labels: {
           fontColor: "#333",
           fontSize: 10,
           boxWidth: 10,
           lineWidth: 10,
           padding: 5,
         }
       },

       tooltips: {
         label: true,
         callbacks: {
           label: function(tooltipItem, data) {
             var dataset = data.datasets[tooltipItem.datasetIndex];
             var meta = dataset._meta[Object.keys(dataset._meta)[0]];
             var total = meta.total;
             var currentValue = dataset.data[tooltipItem.index];
             var percentage = parseFloat((currentValue / total * 100).toFixed(1));
             // var...