click event for legend is not working for pie chart 🐛[BUG]

[Hamza-Afraiz]

🐛 bug 描述 [详细地描述 bug，让大家都能理解]

click event for legend is not working for pie chart

📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]

Just use the pie chart and create click event on legend ,it will wont work

🏞 期望结果 [描述你原本期望看到的结果]

legend item should be clickable

💻 复现代码 [提供可复现的代码，仓库，或线上示例]

`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;
`

© 版本信息

• "@ant-design/charts": "^2.0.4",

• "@ant-design/icons": "^4.3.0",
  

• "@ant-design/plots": "^2.1.16",
  

• • 浏览器环境

• 开发环境 [e.g. win OS]

🚑 其他信息 [如截图等其他信息可以贴在这里]