Doughnut Chart

Code

const ctx = document.getElementById('doughnutChart').getContext('2d');
new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['Desktop', 'Mobile', 'Tablet'],
    datasets: [{
      data: [60, 30, 10],
      backgroundColor: ['#36A2EB', '#FF6384', '#FFCE56'],
      hoverOffset: 8,
      borderWidth: 2,
      borderColor: '#fff'
    }]
  },
  options: {
    responsive: true,
    cutout: '65%',
    plugins: {
      legend: { position: 'bottom' },
      title: { display: true, text: 'Device Distribution' }
    }
  }
});

Explanation

A pie variant with a hollow center; the cutout option (50-70% is typical) controls the hole size as a percentage of the radius. hoverOffset pops slices outward on hover for emphasis. The title plugin displays a heading, and the open center is a good place to render a custom total via a plugin.

More Chart.js Snippets