VictoryPie click single series of chart at a time - victory-charts

Question

I am using VictoryPie on react native (victory-native). My goal is to be able to change the color of one slice of the pie chart onClick (onPress). At any one time the color of only a single slice should be changed to my highlight color.
Using the events prop, I am able to change the color of a slice onPress, but not able to reset it upon clicking on another slice using code like this:
onPress: () => {
return [
{
target: 'data',
mutation: (props) => {return {style: {...props.style, fill: #000000}}}
}
}
Ideally I would like to use the additional eventKey prop to be able to return {style: undefined} for the other slices. But I am not able to determine how to get the array of other elements for the eventKey prop. The onPress does not have any argument stating the index or element. Is there some other way that I can know which item was clicked inside the onPress function?
Thanks for the help in advance!

Answer 1

I was also stuck on the same thing. Here's the code of how I solved that issue. Hope this helps 😊.
<VictoryPie
standalone={false}
labelRadius={({ innerRadius }) => innerRadius + 25}
labelPlacement={({ index }) => {
return "perpendicular";
}}
labelComponent={
<VictoryLabel
style={[
{
fill: Colors.white,
fontSize: 15,
fontFamily: "Bold",
},
]}
/>
}
style={{
data: {
fillOpacity: 1,
stroke: Colors.white,
strokeWidth: 5,
fill: ({ datum, index }) => {
let data = emotions.map((item, index) => {
return item;
});
if (
selectedEmotion.emotion === data[index].emotion_name
) {
return "tomato";
}
return data[index].background_color;
},
},
}}
events={[
{
target: "data",
eventHandlers: {
onPressOut: () => {
return [
{
target: "data",
mutation: (props) => {
let { x, description, id } = props.datum;
setSelectedEmotion({
emotion_id: id,
emotion: x,
description: description,
});
},
},
];
},
},
},
]}
data={EmotionsData}
width={450}
height={450}
colorScale={graphicColorData}
innerRadius={100}
/>

Answer 2

Didn't find it in documentation but searching online, see that you can use props as an argument in the onClick/onPress

Answer 3

you can just first check fill props like this in the mutation object
mutation: (props) => {
const fill = props.style && props.style.fill;
return fill === "#7CFC00" ? null : { style: { fill: "#7CFC00" } };
}