How to animate a pie chart with Victory in React Native?
I was using another library for graphics, but when Apple announced that UIWebView was deprecated I had to change that library. So, I started to search on Google for libraries that don’t use UIWebView, and that’s when I found Victory.
Victory is great! It has multiple charts and the best thing about it is that you can customize almost everything.
What’s Victory?
Victory Native is a React Native library that offers different types of charts, such as line, bar and pie charts. This library is one of the most frequently used alternatives for developers when it comes to adding graphics to an app.
I’ve recently used it in one of my projects. I’ve used the <VictoryChart />, <VictoryLine />, <VictoryPie /> and <VictoryAxis /> components.
The charts worked great but I had an issue while I was adding the animate prop to the <VictoryPie />: I’ve found that the animations didn't work as it should, so I started looking for a solution.
Let’s start from the beginning
Installation
If you don’t have the victory-native library already installed in your project you can easily install it by running this command on your console: yarn add victory-native. If you have any problem with the installation you can check this link.
It’s coding time!
- First, we need our component to be already working. It will look something like this:
And it will display like this:
2. Now we want to add some animation to our chart. We have to add the animate prop to the <VictoryPie /> like it says on the documentation of the library. The code should look like this:
But you will see that there’s no animation playing on the chart and here’s why:
The animation of the Pie Chart only displays when the data is changed.
3. Now we want to fix the issue and here’s how I did it:
I created an initial state (using useState) called defaultGraphicData and then (using useEffect) I changed the values of my graphicData.
And this is how it will display:
Now it's up to you what to do with the animated prop. The Victory library is very well done and it has a bunch of things to do, so I recommend you to read the documentation and play with the animations.
You can check the documentation here: https://formidable.com/open-source/victory/docs/
