How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?

I have distributed the data across the pie to equal 100% in total ( I think lol ) please verify that's correct if you don't mind. But I want to be able to re-distribute the data when I turn off/on the legend items.

Here's a sample of the Component

import React from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Pie } from "react-chartjs-2";
import ChartDataLabels from "chartjs-plugin-datalabels";

ChartJS.register(ChartDataLabels, ArcElement, Tooltip, Legend);

export const data = [
  { lifetime_viewing_subs: 11497117, name: "US" },
  { lifetime_viewing_subs: 3777651, name: "LATAM" },
  { lifetime_viewing_subs: 2494138, name: "EMEA" }
];

const lifetime_viewing_subs_total = data.map(item => item.lifetime_viewing_subs).reduce((prev, next) => prev + next);

export const pieoptions = {
  responsive: true,
  plugins: {
    legend: {
      position: "bottom",
      align: "center"
    },
    datalabels: {
      color: function (context) {
        return context.dataset.borderColor;
      },
      anchor: "center",
      backgroundColor: function (context) {
        return context.dataset.background;
      },
      borderRadius: 100,
      borderWidth: 2,
      borderColor: function (context) {
        return context.dataset.borderColor;
      },
      display: function (context) {
        var dataset = context.dataset;
        var value = dataset.data[context.dataIndex];
        console.log("context.dataIndex: ", context.dataIndex); // 0,1,2
        console.log("dataset: ", dataset); // the dataset object
        console.log("value: ", value); // 0.1403653100534158, 0.647035726341284, 0.21259896360530017
      
        return value;
      },
      formatter: function (value) {
        return Math.round(value * 100).toFixed(0) + "%";
      },
      font: {
        weight: 500,
        size: "14rem"
      }
    }
  }
};

export const piedata = {
  labels: data.map((s) => s.name),
  datasets: [
    {
      data: data.map((s) => s.lifetime_viewing_subs/lifetime_viewing_subs_total),
      backgroundColor: [
        "rgba(255, 99, 132, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(255, 206, 86, 0.2)"
      ],
      borderColor: [
        "rgba(255, 99, 132, 1)",
        "rgba(54, 162, 235, 1)",
        "rgba(255, 206, 86, 1)"
      ],
      fill: true,
      borderWidth: 1
    }
  ]
};

export function App() {
  return (
    <Pie options={pieoptions} plugins={[ChartDataLabels]} data={piedata} />
  );
}

Here is a playground

Thanks in advance

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum