Victory Stacked Area giving undefined on tooltip

Question

I'm using victory stacked area chart and trying to display label on tool tip. But whenever I'm clicking on chart it's not giving index. I tried to console it and it gives undefined to index value but it working fine in stacked bar chart I used the same code. It's working stacked bar chart but not on stacked area chart. Below is my code

const clickEvent = [
    {
      target: 'data',
      mutation: (props: {
        data: {
          [x: string]: {
            x: React.SetStateAction<string>;
            y: React.SetStateAction<number>;
          };
        };
        index: number;
      }) => {
        ({
          style: {fill: colors.primeColor, width: 14.5},
        });
        console.log(props);
        setDay(props?.data[props.index]?.x);
        setWasteItem(props?.data[props.index]?.y);
      },
    },
    {
      target: 'labels',
      mutation: () => ({active: false}),
    },
  ];

  return (
    <VictoryChart
      theme={VictoryTheme.material}
      height={300}
      containerComponent={<VictoryVoronoiContainer />}
      width={380}>
      <VictoryStack height={200}>
        <VictoryArea
          style={{
            data: {
              fill: colors.orangeOpacity02,
              stroke: colors.orange,
              strokeWidth: 2,
            },
          }}
          data={wastedData}
          labelComponent={
            <VictoryTooltip
              renderInPortal={false}
              style={{fill: colors.orange}}
            />
          }
          labels={() => `${day}: ${wasteItem} Wasted`}
          events={[
            {
              target: 'data',
              eventHandlers: {
                onPressIn: () => {
                  return clickEvent;
                },
              },
            },
          ]}
        />
        <VictoryArea
          style={{
            data: {
              fill: colors.primeColorOpacity05,
              stroke: colors.primeColor,
              strokeWidth: 2,
            },
          }}
          data={usedData}
          labelComponent={
            <VictoryTooltip
              renderInPortal={false}
              style={{fill: colors.primeColor}}
            />
          }
          labels={() => `${day}: ${wasteItem} Used`}
          events={[
            {
              target: 'data',
              eventHandlers: {
                onPressIn: () => {
                  return clickEvent;
                },
              },
            },
          ]}
        />
      </VictoryStack>
      <VictoryAxis
        fixLabelOverlap={true}
        tickValues={['Aug 1', 'Aug 15', 'Aug 30']}
        style={{
          axis: {stroke: 'transparent'},
          grid: {stroke: 'transparent'},
          tickLabels: {
            fontSize: 12,
            paddingLeft: 10,
          },
        }}
      />
      <VictoryAxis
        dependentAxis
        tickValues={[0, 10, 20, 30]}
        orientation="left"
        style={{
          tickLabels: {fontSize: 12},
          axis: {stroke: 'transparent'},
        }}
      />
    </VictoryChart>
  );
};

Can anyone tell me what's wrong in that code?

Answer 1

There is no key called data in the event's prop.

eventHandlers should be given as an object whose keys are standard event names (e.g., onClick) and whose values are event callbacks. Callbacks are called with the props of the individual element that triggered the event. For example, when a click event occurs on a bar, the props object supplied to the onClick handler will include props specific to that individual bar, such as datum, index, style, etc. Return values from event handler callbacks may be used to mutate other elements.

you can use datum