How to Retrieve Value and Type of a Pie Chart Segment in Ant Design Charts on Click Event?

Question

I'm using Ant Design Charts for creating a pie chart in my application. When a user clicks on a segment of the pie chart, I want to retrieve both the value and the type of that segment.

I've managed to capture the click event using the event object, but I'm struggling to extract the current value and type of the clicked segment from it.

Could someone please provide guidance or a code example on how to achieve this? Thank you in advance!

import React from "react";
import { Pie } from "@ant-design/plots";
import { PieConfig } from "@ant-design/charts";

const PieWidget = ({currentData, total}:any) => {
  const config :PieConfig = {
    data: currentData,
    state: {
        inactive: { opacity: 0.5 }
    },
    angleField: "value",
    colorField: "type",
    paddingRight: 80,
    innerRadius: 0.6,
    render:'svg',
    autoFit:true,
    label: {
      text: "value",
      style: {
        fontWeight: "bold",
        fontSize: 12,
      },
    },
    legend: {
      color: {
        itemMarker:'circe',
        cols: 3,
        colPadding:4,
        title: false,
        position: "bottom",
        rowPadding: 25,
      },
    },
    itemMarkerSize: 40,
    annotations: [
      {
        type: "text",
        style: {
          text: ""+total,
          x: "50%",
          y: "50%",
          textAlign: "center",
          fontSize: 20,
          fontStyle: "bold",
        },
      },
    ],
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
    scale: { color: { palette: "cool" } }, 
    onReady: ({ chart })=> {
      // Do something
      chart.on('plot:click',  (...args)  => console.log(args));
    }
  };
  return <Pie {...config} />;
};

export default PieWidget;