script.js

const ctx = document.getElementById('pieChart').getContext('2d');

new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Books', 'Courses', 'Consulting', 'Hosting', 'Themes', 'Plugins'],
    datasets: [
      {
        label: 'Sales Share',
        data: [32, 54, 18, 41, 27, 46],
        backgroundColor: [
          'rgba(255, 99, 132, 0.7)',
          'rgba(54, 162, 235, 0.7)',
          'rgba(255, 206, 86, 0.7)',
          'rgba(75, 192, 192, 0.7)',
          'rgba(153, 102, 255, 0.7)',
          'rgba(255, 159, 64, 0.7)',
        ],
        borderColor: '#fff',
        borderWidth: 1,
      },
    ],
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'right',
      },
      title: {
        display: true,
        text: 'Sales Distribution',
      },
      tooltip: {
        callbacks: {
          label: (context) =>
            `${context.label}: ${context.formattedValue} units`,
        },
      },
    },
  },
});