How to Make Beautiful, Easy-to-read Charts with React Native Gifted Charts

Data will talk to people if you can present it elegantly.

The world of web development is adorned with plenty of amazing libraries for charts, but do we have some for mobile apps too?

Is there a react-native library with which you can-

• Draw all kinds of charts? (Bar, Line, Area, Pie, Stack)
• Add gradient and 3D effects with a snap of a finger?
• Fully customize your charts?
• Add smooth animations, without writing actual codes for animation?
• Add onPress events to each data component?
• Scroll through your data, as it’s too long to fit the mobile’s screen width?
• That needs minimal training and has excellent documentation?

react-native-gifted-charts caters to all the above needs.

You can install it from npm-

npm install react-native-gifted-charts react-native-linear-gradient react-native-svg

Github repo- https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts

It’s simple and intuitive.

Let’s say you want to draw a Bar chart with data- [15, 30, 26, 40]

The data you provide to the chart component looks like this-

barData = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];

And the code for this chart is -

import { BarChart } from "react-native-gifted-charts";
        
const App = () => {
    const barData = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];
    return <BarChart data={barData}/>;
};

Now you wish to change the colour of the bars.

Just add frontColor=‘#color-code’ to the <BarChart> component.

Simple, isn’t it?

Not just color, you can configure a whole list of properties, simply by using props like these-

• barWidth
• showGradient
• gradientColor
• roundedTop
• roundedBottom
• activeOpacity
• disablePress
• barBorderRadius

In case, you want a 3D effect, these props will help you-

• isThreeD
• barWidth
• sideWidth
• sideColor
• topColor

Okay, I’m not here to scare you with a humongous list of props. I’d rather share with you the complete cheat sheet of props.

Everything seems fine up to here. But my designer gave me a chart that looks like this-

The data for this chart is-

[500, 745, 320, 600, 256, 300]

This scares me because if I use the frontColor prop, it changes the color of each bar. How do I change the color of some specific bars? 😱

Soon I figured out that I could pass the color along with the value in the data array. Also, there’s a label (weekday) under each bar, so I need to pass the label too.

So, the data array now looks like-

const data = [
        {value: 250, label: 'M'},
        {value: 500, label: 'T', frontColor: '#177AD5'},
        {value: 745, label: 'W', frontColor: '#177AD5'},
        {value: 320, label: 'T'},
        {value: 600, label: 'F', frontColor: '#177AD5'},
        {value: 256, label: 'S'},
        {value: 300, label: 'S'}
];

Wow! it’s so intuitive. 😲

I suppose you’ve already guessed that there are 2 ways to pass the props-

1. Directly as a prop to the <BarChart> component.
2. As a property of the object in the data array. This lets you apply the properties selectively to some specific bars.

On this link, you can find codes for beautiful charts like these-

Stacked Bar Charts

One day I saw something like this-

I’m sorry, whaaaat?? Are they making charts like this?

Anyways, let’s see what gifted-chart has to say on this.

Okay, so here we have stacks of bars for each month. That means the data is definitely a 2D array, somewhat like this-

[ 
  [10, 20],
  [10, 11, 15],
  [14, 18],
  [7, 11, 10]
]

Understanding the stackData

• The stackData passed to the <BarChart> component is an array of objects.
• Each object contains a mandatory key named stacks.
• The value corresponding to the stacks key is an array of objects, each object representing a section of the stack.

The actual code for the above chart is-

import { BarChart } from "react-native-gifted-charts";
        
const App = () => {
    const stackData = [
        {
          stacks: [
            {value: 10, color: 'orange'},
            {value: 20, color: '#4ABFF4', marginBottom: 2},
          ],
          label: 'Jan',
        },
        {
          stacks: [
            {value: 10, color: '#4ABFF4'},
            {value: 11, color: 'orange', marginBottom: 2},
            {value: 15, color: '#28B2B3', marginBottom: 2},
          ],
          label: 'Mar',
        },
        {
          stacks: [
            {value: 14, color: 'orange'},
            {value: 18, color: '#4ABFF4', marginBottom: 2},
          ],
          label: 'Feb',
        },
        {
          stacks: [
            {value: 7, color: '#4ABFF4'},
            {value: 11, color: 'orange', marginBottom: 2},
            {value: 10, color: '#28B2B3', marginBottom: 2},
          ],
          label: 'Mar',
        },
      ];
    return(
        <View>
            <BarChart
              width={340}
              rotateLabel
              barWidth={12}
              spacing={40}
              noOfSections={4}
              barBorderRadius={6}
              stackData={stackData}
            />
        </View>
      );
};

Line and Area charts

Let’s begin with the simplest Line chart visualising the same data that we used in our first Bar chart- [15, 30, 26, 40]

Since the data is the same, we can use the same code, just replace the <BarChart> component with <LineChart>

import { LineChart } from "react-native-gifted-charts";
        
const App = () => {
    const data = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];
    return <LineChart data={data}/>;
};

On this link, you can find codes for beautiful Line charts and Area charts like these-

Pie and Donut charts

Can we use the same code, as our first example? Let’s see-

import { PieChart } from "react-native-gifted-charts";
        
const App = () => {
    const data = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];
    return <PieChart data={data}/>;
};

Only the <BarChart> component is replaced with <PieChart>and it produces this-

I know it looks shitty, and that’s probably because we didn’t provide any colors for the pie sections and the library tried to give random colors by itself.

But I swear you can make beautiful ones like these-

Want the codes? Here they are.

And that’s it for now!