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

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

React-native-gifted-charts is a free and easy-to-use charting library for mobile apps. It’s simple and intuitive. You can use it to draw Bar, Line, Area, Pie, Stack charts and add 3D effects with a snap of a finger. The library is available in the GitHub repo and can be downloaded from the end of the day. The code for this chart is -   -  - and the data you provide to the chart component looks like this.
image
Abhinandan Kushwaha HackerNoon profile picture

Abhinandan Kushwaha

Makes amazing things with JS, React Native

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.

image
image

You can install it from npm-
npm install react-native-gifted-charts react-native-linear-gradient react-native-svg

It’s simple and intuitive.

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

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-
image
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-
image

image

image

Stacked Bar Charts

One day I saw something like this-
image
I’m sorry, whaaaat?? Are they making charts like this?

image

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.
image
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]
image

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}/>;
};

Pro tip: You can convert any line chart into area chart by just passing the areaChart prop to the <LineChart/> component.

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

image

image
image
image

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-
image
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-
image
image
image
image
image

Want the codes? Here they are.

And that’s it for now!
react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!