How to achieve this with chart.js in react?

Question

I am trying to achieve below chart but its failed so could anyone help me out? Donutchart image

here's my code:

import React from 'react'
import { Doughnut } from 'react-chartjs-2'
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'

ChartJS.register(ArcElement, Tooltip, Legend)

const data = {
  labels: ['Product 1', 'Product 2', 'Product 3'],
  datasets: [
    {
      data: [20, 50, 30],
      backgroundColor: ['#ec4899', '#7e22ce', '#eef2ff'],
      borderWidth: [45, 25, 10], // Set different border widths for each slice
      borderColor: ['#ec4899', '#7e22ce', '#eef2ff'], // Set the border color (optional)
      borderJoinStyle: 'miter',
      borderRadius: 1,
      spacing: 10
    }
  ]
}

const options = {
  responsive: true,
  plugins: {
    legend: {
      display: false
    },
    title: {
      display: false
    },
    label: {},
    datasets: {
      display: false
    }
  },
  cutout: '80%' 
}

const DonutChart = () => {
  return <Doughnut data={data} options={options} />
}

export default DonutChart;

Thanks in advance

During hover it is showing properly but rest of the time its showing rounded border.