click event for legend is not working for pieChart

[Hamza-Afraiz]

Here is the code

`import { Pie } from "@ant-design/plots";
import React, { useEffect, useState } from "react";

const UpdatePieChart = ({
PlotMaps = {},
chartData = [],
pieChartIndex = "1",
showLegends = false,
onLegendClick = null,
}) => {
const [data, setData] = useState({});

useEffect(() => {
asyncFetch();
}, []);

const asyncFetch = () => {
fetch(
"https://gw.alipayobjects.com/os/antfincdn/fKTgtjKdaN/association-pie.json"
)
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => {
console.log("fetch data failed", error);
});
};

if (!Object.keys(data).length) {
return null;
}

const showTooltip = (evt, pie) => {
console.log({ PlotMaps, evt, pie });
Object.keys(PlotMaps).forEach((plot) => {
if (plot !== pie) {
PlotMaps[String(plot)].chart.emit("tooltip:show", {
data: { data: { area: evt.data.data.area } },
});
PlotMaps[String(plot)].chart.emit("element:highlight", {
data: { data: { area: evt.data.data.area } },
});
}
});
};

const hideTooltip = (evt, pie) => {
Object.keys(PlotMaps).forEach((plot) => {
if (plot !== pie) {
PlotMaps[String(plot)].chart.emit("tooltip:hide", {
data: { data: { area: evt.data.data.area } },
});
PlotMaps[String(plot)].chart.emit("element:unhighlight", {
data: { data: { area: evt.data.data.area } },
});
}
});
};

const LeftConfig = {
angleField: "bill",
colorField: "area",
data: data.pie1,
label: {
text: "bill",
},
legend: false,
tooltip: {
title: "area",
},
interaction: {
elementHighlight: true,
},
state: {
inactive: { opacity: 0.5 },
},
};
if (showLegends && onLegendClick) {
debugger;
LeftConfig.legend = {
custom: true,
click: (evt) => {
console.log({ evt }, "here");
debugger;

    onLegendClick(evt);
  },
  color: {
    title: false,
    position: "bottom",
  },
};

} else {
LeftConfig.legend = {
color: {
title: false,
position: "bottom",
},
};
}
console.log({ LeftConfig });
return (
<div style={{ display: "flex", justifyContent: "space-around" }}>
<Pie
style={{ width: "25%" }}
{...LeftConfig}
onReady={(plot) => {
console.log(plot.chart.on);
PlotMaps.pieChartIndex = plot;
plot.chart.on("interval:pointerover", (evt) => {
showTooltip(evt, pieChartIndex);
});
plot.chart.on("interval:pointerout", (evt) => {
hideTooltip(evt, pieChartIndex);
});
plot.chart.on("legend:click", (evt) => {
console.log("finalley gere");
});
}}
/>

);
};
export default UpdatePieChart;
`