I am trying to implement a bar graph that will allow the selection of bars on a bar graph. The trouble I am running into is properly setting the events. I have the following code:

<VictoryChart
containerComponent={
  <Svg>
    <VictoryVoronoiContainer voronoiDimension="x" />
  </Svg>
}
>
<VictoryAxis fixLabelOverlap name="dateAxis" />
<VictoryAxis dependentAxis name="dailySpendAxis" />
<VictoryBar
  data={dataWithCreditBarsRemoved}
  events={[
          {
            target: 'data',
            eventHandlers: {
              onPressIn: (event, data) => {
                return [
                  {
                    target: 'data',
                    eventKey: 'all',
                    mutation: props => {
                      const fill = props.style?.fill;
                      return fill === 'green'
                        ? null
                        : { style: { fill: 'green' } };
                    },
                  },
                  {
                    target: 'data',
                    mutation: () => {
                      console.log(data.datum);
                      setSelectedBar(data?.datum);
                      return {
                        style: { fill: 'red' },
                      };
                    },
                  },
                ];
              },
            },
          },
        ]}
  name="dailySpendBars"
/>
</VictoryChart>

Doing it like this makes it difficult to press on bars that have little data.

I'd like to implement it in a way where when the graph is pressed, it selects the closest bar and sliding a finger in either direction will select the bar closest. The best example I could find was in a Nike running app. It puts in a line with a tooltip that holds data that changes when the finger slides around.

How do I implement the sliding in Victory Native? Any direction would be much appreciated!