How to animate a pie chart with Victory in React Native?

Matías Grote
Oct 25, 2019 · 3 min read

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!

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/

Wolox

Wolox stands for innovation, engineering and working culture that transforms problems into solutions and ideas into products. www.wolox.com.ar

Matías Grote

Written by

React Native developer at @Wolox

Wolox

Wolox

Wolox stands for innovation, engineering and working culture that transforms problems into solutions and ideas into products. www.wolox.com.ar

More From Medium

More from Wolox

865

More from Wolox

More from Wolox

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade