If the graph’s height is 150 then the column’s height is 300. Every column has a positive part (A) and a negative part (B). Opposite side of these parts is always hidden. The A is hidden for the negative part and the B is hidden for the positive part. It means that if we move the positive part (A) underneath of baseline to the B space, the positive column will be completely hidden. That’s what we want when the value is negative.

You can see the negative value for the last column on the picture. The value is -5. Positive column is completely moved underneath of baseline (it’s hidden) and negative column is moved to proper Y position to represent -5 value. A maximum value for this graph is 10 (first column). It means that the -5 will be in the middle of a negative part (75 / 2).

We need to do a bit of math here because we need to interpolate actual value to Y position. But I am not going to talk about this here. I believe that you can figure everything out pretty easily.

Animated Column

I used my open source library called react-native-motion and component TranslateY. Which makes animations really easy to implement. Look at the code. Easy to understand. We use TranslateY component in the same way as we would use View component. The only thing we need to do is compute Y positions for positive column, negative column, baseline, and a value label.

 <View style={styles.container}>
          <TranslateY
            style={[styles.graphContainer]}
            value={graphLayerY}
            delay={delay}
          >
            // Positive column
            <TranslateY
              style={styles.positiveColumn}
              value={positiveY}
              delay={delay}
            />
            // Baseline
            // ...
            //
            // Negative column
            <TranslateY
              style={styles.negativeColumn}
              value={negativeY}
              delay={delay}
            />
          </TranslateY>
          <TranslateY
            style={styles.valueLayer}
            value={valueLayerY}
            delay={delay + valueDelay}
          >
            {this.renderValue()}
          </TranslateY>
</View>

Check the result in a real application. Pineapplee.io already implemented the column chart. As I said before, everything is done by UI thread (it’s pretty fast). There is an onPress event so you can change the months. When you select the category it will change the values of a graph and recomputes Y positions. Then the react-native-motion takes care of animation.

Animated Number

The number animation is a bit problem. Because we can’t move it to UI thread. It has to be done by JS thread. I’ve seen that developers usually have the effect done by setInterval. Of course, you can use it, but I wanted to do it safer.

So I use React Native’s Animated API even for the number animation. We can add a listener to animated value and when the value is changed we just re-render the number. It’s easy and you can take advantage of the Animated API. By using an Easing for example. And what’s the best? I put the component to the react-native-motion library which is open-sourced for you guys ?

You just have to write a couple of lines like this. Once the value is changed in your code it will take care of the rest.