CODEWITHSUNDEEP
reactjsreact-nativevictory-charts
Rajat Verma
Rajat Verma

Reputation: 460

victory-native : events props not working in react native / event not firing in react native when using victory bar chart

I am trying to implement Victor bar chart in which I want to perform some action when user click on the bar. but when do so using event props which in given in the docs(using the same sample code given in docs) but the event is not firing. You can also see my implementation on snack.expo.io using this link...ClickMe

package version are:

"react-native-svg": "^9.4.0",
"victory-native": "^32.0.2",
"expo": "^33.0.0",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",

here is same code for your reference...

Note : I also used 'onPressIn', 'onClick' and 'onPress' neither of them work.

<VictoryBar
   data={[
     {x: 1, y: 2, label: "A"},
     {x: 2, y: 4, label: "B"},
     {x: 3, y: 7, label: "C"},
     {x: 4, y: 3, label: "D"},
     {x: 5, y: 5, label: "E"},
   ]}
   events={[
     {
       target: "data",
       eventHandlers: {
         onPressIn: () => {
           return [{
             target: "labels",
             mutation: (props) => {
               return props.text === "clicked" ?
                 null : { text: "clicked" }
             }
           }];
         }
       }
     }
   ]}
 />

Please help me out

Upvotes: 3

Views: 7192

Answers (5)

nazmul
nazmul

Reputation: 435

In my case wrapping charts with TouchableOpacity works only with ios and wrapping with svg works with android. So i just had to switch the wrapper according to platform ,

const ChartClick=Platform.select({
  ios: TouchableOpacity,
  android: Svg
});

And I use this as ,

<ChartClick>
 <VictoryChart>
 </VictoryChart>
</ChartClick>

My package versions are : react-native-svg:9.0.0,victory-native:34.0.0

Upvotes: 1

bleszerd
bleszerd

Reputation: 9

To keep the content up to date, on Android you can set "onPressIn" instead of "onPress" so that the event is acknowledged.

<VictoryChart
  containerComponent={<VictoryContainer disableContainerEvents />}
>
  <VictoryBar
    events={[{
      target: 'data',
      eventHandlers: {
        onPressIn: () => console.log('Pressed!')
      }
    }]}
  />
</VictoryChart>

Upvotes: 1

hong developer
hong developer

Reputation: 13926

If you do this with a word, the event will behave as normal as a document.

<VictoryBar
  data={[
    {x: 1, y: 2, label: "A"},
    {x: 2, y: 4, label: "B"},
    {x: 3, y: 7, label: "C"},
    {x: 4, y: 3, label: "D"},
    {x: 5, y: 5, label: "E"},
  ]}
  events={[{
    target: "data",
    eventHandlers: {
      onPress: () => {
        return [
          {
            mutation: (props) => {
              return props.text === "clicked" ?
                null : { text: "clicked" }
            }
          }
        ];
      }
    }
  }]}
/>

Upvotes: 3

Rajat Verma
Rajat Verma

Reputation: 460

Wrapping it in Svg like this worked for me:

<Svg>
  <VictoryPie
    height={280}
    colorScale={pie_chart_color}
    data={this.state.data}
    style={...}
    events={[...]}
  />
</Svg>

Upvotes: 5

Yash Vardhan
Yash Vardhan

Reputation: 370

Try wrapping the VictoryBar inside the VictoryChart. And the VictoryChart inside TouchableOpacity like this

<TouchableOpacity onPress={...}>
    <VictoryChart containerComponent={<VictoryContainer disableContainerEvents />}
   ...>
       <VictoryBar
        ... />
    </VictoryChart>
</TouchableOpacity>

Upvotes: 6

Related Questions