JSFiddle - React, Tailwind, and code Playground

by SunnyRed

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
  <div>
    <canvas id="myChart-01" width="200px" height="200px"></canvas>
  </div>

CSS

div {
  max-width: 200px;
  max-height: 200px;
}

JavaScript

let config01 = {
    type: 'doughnut',
    data: {
      labels: [
        'Part 01',
        'Part 02',
        'Part 03'
      ],
      datasets: [
        {
          data: [2000, 1000, 600],
          backgroundColor: [
            'rgb(0, 76, 138)',
            'rgb(50, 151, 230)',
            'rgb(250, 202, 55)',
          ],
          hoverOffset: 10
        }
      ]
    },
    options: {
      legend: {
        position: 'bottom',
        color: '#000000',
        labels: {
          usePointStyle: true,
        }
      },
      animation: {
        duration: 1000,
        easing: "linear"
      },
      title: {
        display: true,
        text: 'Some Title',
        fontColor: 'rgb(0, 18, 58)',
        fontSize: '18',
        padding: 5
      }
    }
  };
  
var ctx = document.getElementById('myChart-01').getContext('2d');
new Chart(ctx, config01);