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 , , and components.

The charts worked great but I had an issue while I was adding the prop to the 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 library already installed in your project you can easily install it by running this command on your console: . If you have any problem with the installation you can check this link.

It’s coding time!

  1. 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 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 ) called and then (using ) I changed the values of my .

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

We are a tech company redefining the way things work.

Wolox

We specialize in end-to-end development of high impact products, providing technological solutions to start-ups and companies that are seeking to innovate and need support in developing their ideas. In January 2021, we became part of Accenture.

Matías Grote

Written by

React Native developer at @Wolox

Wolox

We specialize in end-to-end development of high impact products, providing technological solutions to start-ups and companies that are seeking to innovate and need support in developing their ideas. In January 2021, we became part of Accenture.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store