Victory-native: Animate and Event not working

Created on 3 Feb 2017  路  6Comments  路  Source: FormidableLabs/victory-native

Hi,

I am working on RN0.37 and trying to generate pie chart using victory with animation and some touch event.
However, even though I have followed your guide completely, the animation and touch event do not work on my side. Also there is no error reported so I am not sure what's the issue.
May I seek your help on identifying the issue?

Below is the code snippet:

<VictoryPie
          data={[
            {month: 'September', profit: 35000, loss: 2000},
            {month: 'October', profit: 42000, loss: 8000},
            {month: 'November', profit: 55000, loss: 5000}]}
          x="month"
          y={(datum) => datum.profit - datum.loss}
          width={400}
          height={300}
          padding={40}
          padAngle={1}
          innerRadius={50}
          animate={{duration: 2000,
            onLoad: {duration: 1000},
            onEnter: {duration: 500, before: () => ({y: 0})}}}
          events={[
            {
              target: 'data',
              // eventKey: [0, 2, 4],
              eventHandlers: {
                onClick: () => {
                  return [
                    {
                      mutation: (props) => {
                        return {
                          style: Object.assign({}, props.style, {fill: 'orange'})
                        }
                      }
                    }, {
                      target: 'labels',
                      mutation: () => {
                        return {text: 'hey'}
                      }
                    }
                  ]
                }
              }
            }
          ]}
        />

Most helpful comment

I am having this same problem running version 0.50.4 of React-Native. Here is my code snippet:

          <VictoryPie
            height={275}
            width={400}
            events={[
              {
                target: 'data',
                eventHandlers: {
                  onPress: (event, data) => {
                    console.log('<><> data')
                    alert(data)
                  },
                },
              },
            ]}
            labels={(d: any) => `${d.x}:\n${d.y} lbs`}
            // labelComponent={this.returnLabelComponent()}
            style={{
              labels: {
                fill: 'rgb(139, 139, 139)',
                fontSize: 16,
                fontWeight: '400',
              },
            }}
            data={this.getPieChartData()}
          />

All 6 comments

@WhyX do you have a repo example to reproduce it?

Animation works fine on the latest version and RN 42.

Try to use onPress:

            events={[{
                target: 'data',
                eventHandlers: {
                  onPress: (event, data) => {
                    console.log(data);
                  }
                },
              }]}

hey @WhyX! let us know if you're still encountering issues with victory-native and i'll open this issue up again

I am having this same problem running version 0.50.4 of React-Native. Here is my code snippet:

          <VictoryPie
            height={275}
            width={400}
            events={[
              {
                target: 'data',
                eventHandlers: {
                  onPress: (event, data) => {
                    console.log('<><> data')
                    alert(data)
                  },
                },
              },
            ]}
            labels={(d: any) => `${d.x}:\n${d.y} lbs`}
            // labelComponent={this.returnLabelComponent()}
            style={{
              labels: {
                fill: 'rgb(139, 139, 139)',
                fontSize: 16,
                fontWeight: '400',
              },
            }}
            data={this.getPieChartData()}
          />

Hey @Tzinov15 , did you got the solution? I'm also facing the issue. @chrisbolin kindly help.

Was this page helpful?
0 / 5 - 0 ratings