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 library with which you can- react-native 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 to the component. frontColor=‘#color-code’ <BarChart> Simple, isn’t it? Not just you can configure a whole list of properties, simply by using props like these- color, 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 prop, it changes the color of each bar. How do I change the color of some specific bars? 😱 frontColor Soon I figured out that I could pass the along with the value in the data array. Also, there’s a label (weekday) under each bar, so I need to pass the too. color label 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- Directly as a prop to the component. <BarChart> As a property of the object in the data array. This lets you apply the properties selectively to some specific bars. On , you can find codes for beautiful charts like these- this link 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 component is an array of objects. <BarChart> Each object contains a mandatory key named . stacks The value corresponding to the key is an array of objects, each object representing a section of the stack. stacks 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 component with <BarChart> <LineChart> import { LineChart } from "react-native-gifted-charts";
        
const App = () => {
    const data = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];
    return <LineChart data={data}/>;
}; You can convert any line chart into area chart by just passing the prop to the <LineChart/> component. Pro tip: areaChart On , you can find codes for beautiful Line charts and Area charts like these- this link 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 component is replaced with and it produces this- <BarChart> <PieChart> 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? they are. Here And that’s it for now!

Stacks

ORANGE

2022 - HackerNoon Contributor of the Year - Data Visualization

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

Abhinandan Kushwaha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

Abhinandan Kushwaha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES