<div>
  <canvas id="total-chart" width="120" height="120"></canvas>   
</div>
const ctxTotal = document.getElementById('total-chart').getContext('2d');
    ctxTotal.canvas.parentNode.style.height = '220px';
    ctxTotal.canvas.parentNode.style.width = '220px';
    const data = {
        labels: [

        ],
        datasets: [{
            /*label: 'My First Dataset',*/
            data: [50, 25, 25],
            borderWidth: [10, 0, 0],
            borderColor: '#00CA8B',
            borderRadius: 0,
            backgroundColor: [
                '#00CA8B',
                '#FFA800',
                '#5F95FF'
            ],
            hoverOffset: 4
        }]
    };

    new Chart(ctxTotal, {
        type: 'doughnut',
        data: data,
        options: {
            cutout: 80,
        }
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.1/chart.min.js
  2. https://cdn.jsdelivr.net/npm/chart.js