Having Pie-Chart with Data points in the Legend section

i am trying to have some datapoints show in the legends section however, since the new update on chart.js im not able to do it. All the youtube videos and help are in lower version which i dont want to use.

these are the resources i used which is in 2.9.x but doesnt work with 3.x.x

enter image description here

i have tried looking at other stackedoverflow but cant find the one i want like above.

https://www.youtube.com/watch?v=c54SB6wVnQw&t=862s

https://giselamirandadifini.com/creating-a-custom-chart.js-legend-style

Please could you help me?

my code below

    <div class="chart1">
            <canvas id="dougnut1"></canvas>
          </div>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// START OF DOUGHNUT CHART
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const doughnutLabels = [];
const doughnutData = [];
function handleHover(evt, item, legend) {
  legend.chart.data.datasets[0].backgroundColor.forEach(
    (color, index, colors) => {
      colors[index] =
        index === item.index || color.length === 9 ? color : color + "4D";
    }
  );
  legend.chart.update();
}

function handleLeave(evt, item, legend) {
  legend.chart.data.datasets[0].backgroundColor.forEach(
    (color, index, colors) => {
      colors[index] = color.length === 9 ? color.slice(0, -2) : color;
    }
  );
  legend.chart.update();
}

async function showDoughnutChart() {
  await getDataDoughnutGraph();
  const doughnutChart = document.getElementById("dougnut1").getContext("2d");

  let chart3a = new Chart(doughnutChart, {
    type: "doughnut",
    data: {
      labels: doughnutLabels,
      datasets: [
        {
          label: "Some metric",
          backgroundColor: [
            "#619E98",
            "#4164BE",
            "#7D35CA",
            "#B2A44D",
            "#946B76",
            "#6C9D62",
            "#C6B139",
            "#2688D9",
            "#D62963",
            "#CCBF33",
            "#adff2f",
            "#B6495D",
          ],
          borderWidth: 1,
          borderRadius: 5,
          cutout: "50%",
          data: doughnutData,
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: true,
          position: "right",
          onHover: handleHover,
          onLeave: handleLeave,
        },
        title: {
          display: true,
          text: "Tag Distrubution by Class",
          color: "black",
        },
      },
      layout: {
        padding: 10,
      },
      maintainAspectRatio: false,
      responsive: true,
    },
  });
}

async function getDataDoughnutGraph() {
  const responseLine = await fetch(
    "stats/Stats_Tags_Total_Yesterday_By_Category.csv"
  );
  const chart3el = document.getElementById("dougnut1").getContext("2d");
  const data = await responseLine.text();
  const table = data.split("\n").slice(0);
  table.forEach((row) => {
    const columns = row.split(",");
    const perDay = columns[0];
    doughnutLabels.push(perDay);
    const numbOfDocPerClass = columns[1];
    doughnutData.push(numbOfDocPerClass);
  });
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// END OF DOUGHNUT CHART
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////