<canvas id="myDoughnutChart" width="300" height="300"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
 const ctx = document.getElementById('myDoughnutChart').getContext('2d');

 const myDoughnutChart = new Chart(ctx, {
   type: 'doughnut',
   data: {
     labels: ['Facebook', 'Instagram', 'Twitter'],
     datasets: [{
       label: 'Social Media Usage',
       data: [50, 30, 20],
       backgroundColor: ['#3b5998', '#e1306c', '#1da1f2']
     }]
   },
   options: {
     responsive: true,
     cutout: '50%', // Controls hole size
   }
 });
</script>