ChartJS adjusting Pie Chart Legend

Question

I would like to adjust my ChartJS/React-chartjs-2 pie chart to show the legend evenly stacked on the side of the pie chart. I have attemped to manipulate options.legend.position but it doesnt seem to change. Below is a snippet of the code and a screenshot of my pie chart. I am using chart.js 3.9.0 / react-chartjs-2 4.3.1 / react 18.2.0

Thanks!

 const options = {
    title:{
      display: true,
      text: "Current Allocations"
    },
    legend: {
      position: "right",
    },
    responsive: true,
    animation: {
      animateRotate: false,
      animateScale: true,
    },
  };

  const data = {
    labels: [
      "Cash / Cash Equivalents - $" +
        cashTotal.toLocaleString() +
        " - " +
        cashPercent.toFixed(0) +
        "%",
      "Fixed Income - $" +
        fixedIncomeTotal.toLocaleString() +
        " - " +
        fixedIncomePecent.toFixed(0) +
        "%",
      "Real Estate - $" +
        realEstateTotal.toLocaleString() +
        " - " +
        realEstatePercent.toFixed(0) +
        "%",
      "Private Equities - $" +
        privateEquityTotal.toLocaleString() +
        " - " +
        privateEquityPercent.toFixed(0) +
        "%",
      "Commodities / Futures - $" +
        commoditiesAndFuturesTotal.toLocaleString() +
        " - " +
        commoditiesAndFuturesPercent.toFixed(0) +
        "%",
      "Blockchain and Crypto - $" +
        blockChainTotal.toLocaleString() +
        " - " +
        blockChainPercent.toFixed(0) +
        "%",
      "Equities - $" +
        equitiesTotal.toLocaleString() +
        " - " +
        equitiesPercent.toFixed(0) +
        "%",
      "Oil and Gas / Energy - $" +
        oilAndGasTotal.toLocaleString() +
        " - " +
        oilAndGasPercent.toFixed(0) +
        "%",
      "Longevity - $" +
        longevityTotal.toLocaleString() +
        " - " +
        longevityPercent.toFixed(0) +
        "%",
      "Life Insurance - $" +
        lifeInsuranceTotal.toLocaleString() +
        " - " +
        lifeInsurancePercent.toFixed(0) +
        "%",
    ],
    datasets: [
      {
        data: [
          cashTotal,
          fixedIncomeTotal,
          realEstateTotal,
          privateEquityTotal,
          commoditiesAndFuturesTotal,
          blockChainTotal,
          equitiesTotal,
          oilAndGasTotal,
          longevityTotal,
          lifeInsuranceTotal,
        ],
        backgroundColor: [
          "rgba(121, 224, 162, 0.8)",
          "rgba(93, 217, 99, 0.8)",
          "rgba(174, 209, 69, 0.8)",
          "rgba(201, 134, 46, 0.8)",
          "rgba(194, 25, 70, 0.8)",
          "rgba(95, 8, 105, 0.8)",
          "rgba(18, 10, 102, 0.8)",
          "rgba(12, 61, 92, 0.8)",
          "rgba(18, 91, 115, 0.8)",
          "rgba(88, 177, 187, 0.8)",
        ],
      },
    ],
  };

  return (
    <div style={{ width: "500px" }}>
      <Pie data={data} options={options} />
    </div>
  );

Answer 1

I was able to fix this by moving legend.position from options to options.plugins

  const options = {
    responsive: true,
    animation: {
      animateRotate: false,
      animateScale: true,
    },
    plugins: {
      legend: {
        position: "right",
      },
      title:{
        display: true,
        text: "Current Allocations",
      },
    }
  };