paint-brush
How to Make Beautiful, Easy-to-read Charts with React Native Gifted Chartsby@ak97
7,668 reads
7,668 reads

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

by Abhinandan KushwahaDecember 6th, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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.

Company Mentioned

Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - How to Make Beautiful, Easy-to-read Charts with React Native Gifted Charts
Abhinandan Kushwaha HackerNoon profile picture

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.


An Area chart made with react-native-gifted-charts

A Bar chart made with react-native-gifted-charts


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]

simple bar chart


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-

specific bars

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-

3D bars


Capped bars


Grouped bars

Stacked Bar Charts

One day I saw something like this-
stacked bar charts

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.

A 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]

Line chart


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-


Line chart


Multiple lines

Awesome Area chart

Custom Data points and data point label component

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-
simple pie

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-

Donut chart Split section 3D donut Percentage


Want the codes? Here they are.


And that’s it for now!