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'}
}
}
]
}
}
}
]}
/>
@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.
Most helpful comment
I am having this same problem running version 0.50.4 of React-Native. Here is my code snippet: