I'm using Victory Native charts in React Native and am attempting to animate the endAngle of Victory Pie chart from 0 to 360 to produce an effect similar to this.
I include a simplified version of my code. Simplified in the sense that I have hardcoded the dynamic data into the initial state. My code is as follows:
import React, {Component} from "react";
import {Animated, View} from "react-native";
import {VictoryPie} from "victory-native";
export default class PieGraph extends Component {
state = {
data: [
{
"color": "#D8BDC4",
"y": 6,
},
{
"color": "#D88196",
"y": 1,
},
{
"color": "#B73756",
"y": 3,
},
],
total: 10,
endAngle: new Animated.Value(0),
};
componentDidMount() {
Animated.timing(this.state.endAngle, {toValue: 360, duration: 2000}).start();
}
render() {
const {data, total, endAngle} = this.state;
return (
<View style={{paddingTop: 40}}>
<VictoryPie
animate={{duration: 2000}}
data={data}
labels={datum => total ? `${Math.round((datum.y / total) * 100)}%` : ''}
colorScale={data.map(({color}) => color)}
startAngle={0}
endAngle={endAngle}
/>
</View>
)
}
}
When animating the endAngle as above, the chart doesn't appear despite this.state.endAngle changing from 0 to 360. No errors or warnings were output.
When defining a static value for the endAngle prop less than 360 but above 0, the chart instantly appears in that state. When omitting the endAngle prop it instantly appears as a full circle.
I have also tried starting animation as a callback on the onLoad.before
property on the animate prop, but still get the same result.