VictoryPie click single series of chart at a time

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}
                  />

---