How to use gesture events with Victory Native

Viewed 14

I'm trying to understand how to make my chart look like the one below, where if you press and move around it would show the current data object (date and value) enter image description here

I don't see in the Victory docs an event or container that offer such support on Native? I tried briefly with PanResponder but doesn't seem like I use that inside Victory events

Code below

export function VictoryAreaChart({ chartData, yName }) {
  return (
    <View>
      <Svg style={{ height: 0 }}>
        <Defs>
          <LinearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <Stop offset="0%" stopColor="#4E54C8" />
            <Stop offset="100%" stopColor="#a8abe4" />
          </LinearGradient>
        </Defs>
      </Svg>
      {chartData.length > 0 && (
        <VictoryGroup
          padding = {{right: 12, left:12}}
        >
          <VictoryLine
            domainPadding={{y: 5}}
            height={150}
            interpolation="natural"
            x={d => new Date(d.date_time)}
            y={yName}
            data={chartData}
            style={{
              data: {
                stroke: '#4E54C8',
                strokeWidth: 2
              },
            }}
            data={chartData}
            events={[
            {
              target: "data",
              eventHandlers: { 
              }
            }
          ]}
          />
        </VictoryGroup>
      )}
    </View>
  );
}

Image of my screen enter image description here

0 Answers
Related