legalgo-FE-reactrouter/app/pages/dashboard/chart-donut.tsx

import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  type ChartOptions,
} from 'chart.js'
import { Doughnut } from 'react-chartjs-2'
ChartJS.register(
  ArcElement,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
)

export const ChartDonut = () => {
  const data = {
    labels: ['Selesai', 'Belum Selesai'],
    datasets: [
      {
        data: [70, 30],
        backgroundColor: ['#1e3a8a', '#e5e7eb'],
        borderWidth: 0,
        cutout: '70%',
        circumference: 180,
        rotation: 270,
      },
    ],
  }

  const options: ChartOptions<'doughnut'> = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'right',
        labels: {
          usePointStyle: true,
          pointStyle: 'circle',
          boxWidth: 10,
        },
      },
      tooltip: {
        enabled: false,
      },
    },
  }

  return (
    <div className="rounded-xl bg-white p-6 shadow-sm">
      <h2 className="mb-4 text-[20px]">Langganan Selesai</h2>
      <div className="flex items-center justify-between">
        <div style={{ height: 'auto', width: '100%' }}>
          <Doughnut
            data={data}
            options={options}
          />
        </div>
      </div>
    </div>
  )
}