我正在使用React，TypeScript和react-chartjs-2。我需要为我的饼图创建一个自定义标签，显示标签名称，数据量和百分比。我希望它看起来像这样：
橙子
10 / 50%
香蕉
5 / 25%
草莓
5 / 25%
这样标签名称在第一行，数量和百分比在第二行。标签颜色将在它旁边。目前我的代码只显示标签名称和颜色，我不知道如何添加数量和百分比。
这是我现在所拥有的

const [data, setData] = useState<ChartData<'pie'>>();
  const [options, setOptions] = useState<ChartOptions<'pie'>>();

// Data for the pie chart (comes from a form)
const foods = [
    { value: field1, label: 'Orange' },
    { value: field2, label: 'Banana' },
    { value: field3, label: 'Strawberry' },
  ];

  // Pie chart code here
  function PieData() {
    setData({
        labels: foods.map(food => food.label),
        datasets: [
          {
            label: 'Foods',
            data: foods.map(food => food.value),
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
            ],
            borderColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
            ],
            borderWidth: 1,
          },
        ],
    })
    setOptions({
      responsive: true,
      plugins: {
        legend: {
          position: 'right',
          rtl : true,
          labels: {
            usePointStyle: true,
            pointStyle: 'circle',
          }
        },
      },
    });
  }

在这里，我返回饼图：

<Pie id="pieChart" data={data} options={options}/>

所以我假设我必须编辑选项，但我真的不知道如何编辑。