How to show charts in react native

Share the post

Hello All, Today we will discuss How to show charts in react native? The basic example shows the chart in React native application. In this example, We will use the chart kit library. This library will help us to implement a chart in react native. The following step helps us to implement the React native chart kit example. Although this library will cover many types of charts we will only show three charts in this example.

Line Chart
Bar Chart
Pie Chart
The above three charts covered in this topic

How to show charts in react nativechart kit?

1. Create a new react native application & create a new page. If you don’t know how to create react native application then follow this tutorial.

2. Install the dependency as shown below

npm i react-native-chart-kit
npm i react-native-svg

3. Import three charts from ‘react-native-chart-kit’

import {
    LineChart,
    BarChart,
    PieChart
} from "react-native-chart-kit";

4. For Line Chart Implement the following code

<View>
                        <Text style={styles.txt}>Line Chart Example</Text>
                        <LineChart
                            data={{
                                labels: ["JAN", "FEB", "MAR"],
                                datasets: [
                                    {
                                        data: [
                                            100,
                                            200,
                                            300
                                        ]
                                    }
                                ]
                            }}
                            width={Dimensions.get("window").width} // from react-native
                            height={350}
                            chartConfig={{
                                backgroundColor: "#EC33FF",
                                backgroundGradientFrom: "#FF5733",
                                backgroundGradientTo: "#FF5770",
                                color: () => 'yellow',
                                labelColor: () => 'white',

                            }}
                        />
                    </View>
Line Chart Output
Line Chart Output

5. For Bar Chart Implement the following code

<View>
                        <Text style={styles.txt}>Bar Chart Example</Text>
                        <BarChart
                            data={{
                                labels: ["JAN", "FEB", "MAR"],
                                datasets: [
                                    {
                                        data: [
                                            100,
                                            200,
                                            300
                                        ]
                                    }
                                ]
                            }}
                            width={Dimensions.get("window").width} // from react-native
                            height={350}
                            chartConfig={{
                                backgroundColor: "#EC33FF",
                                backgroundGradientFrom: "#FF5733",
                                backgroundGradientTo: "#FF5770",
                                color: () => 'yellow',
                                labelColor: () => 'white',

                            }}
                        />
                    </View>
Bar Chart Output
Bar Chart Output

5. For Pie Chart Implement the following code

state = {
        data: [
            {
                name: "A",
                product: 100,
                color: "#EC33FF",
                legendFontColor: "black",
                legendFontSize: 10
            },
            {
                name: "B",
                product: 200,
                color: "#FF5733",
                legendFontColor: "black",
                legendFontSize: 10
            },
            {
                name: "C",
                product: 300,
                color: "#FF5770",
                legendFontColor: "black",
                legendFontSize: 10
            }
        ]
    }
 <View>
                        <Text style={styles.txt}>Pie Chart Example</Text>
                        <PieChart
                            data={
                                this.state.data
                            }
                            width={Dimensions.get("window").width} // from react-native
                            height={350}
                            chartConfig={{
                                backgroundColor: "#EC33FF",
                                backgroundGradientFrom: "#FF5733",
                                backgroundGradientTo: "#FF5770",
                                color: () => 'yellow',
                                labelColor: () => 'black',

                            }}
                            accessor={"product"}
                            backgroundColor={"transparent"}
                            paddingLeft={"20"}
                            center={[10, 50]}
                            absolute
                        />
                    </View>
Pie Chart Output
Pie Chart Output

6. The full source code is given below

import React, { Component, useState } from 'react';
import { StyleSheet, Text, View, Dimensions,ScrollView } from 'react-native';

import {
    LineChart,
    BarChart,
    PieChart
} from "react-native-chart-kit";

export default class HomePage extends Component {


    state = {
        data: [
            {
                name: "A",
                product: 100,
                color: "#EC33FF",
                legendFontColor: "black",
                legendFontSize: 10
            },
            {
                name: "B",
                product: 200,
                color: "#FF5733",
                legendFontColor: "black",
                legendFontSize: 10
            },
            {
                name: "C",
                product: 300,
                color: "#FF5770",
                legendFontColor: "black",
                legendFontSize: 10
            }
        ]
    }


    componentDidMount = () => {
    }



    render() {
        return (
            <ScrollView >
                <View >
                    <View>
                        <Text style={styles.txt}>Line Chart Example</Text>
                        <LineChart
                            data={{
                                labels: ["JAN", "FEB", "MAR"],
                                datasets: [
                                    {
                                        data: [
                                            100,
                                            200,
                                            300
                                        ]
                                    }
                                ]
                            }}
                            width={Dimensions.get("window").width} // from react-native
                            height={350}
                            chartConfig={{
                                backgroundColor: "#EC33FF",
                                backgroundGradientFrom: "#FF5733",
                                backgroundGradientTo: "#FF5770",
                                color: () => 'yellow',
                                labelColor: () => 'white',

                            }}
                        />
                    </View>
                    <View>
                        <Text style={styles.txt}>Bar Chart Example</Text>
                        <BarChart
                            data={{
                                labels: ["JAN", "FEB", "MAR"],
                                datasets: [
                                    {
                                        data: [
                                            100,
                                            200,
                                            300
                                        ]
                                    }
                                ]
                            }}
                            width={Dimensions.get("window").width} // from react-native
                            height={350}
                            chartConfig={{
                                backgroundColor: "#EC33FF",
                                backgroundGradientFrom: "#FF5733",
                                backgroundGradientTo: "#FF5770",
                                color: () => 'yellow',
                                labelColor: () => 'white',

                            }}
                        />
                    </View>

                    <View>
                        <Text style={styles.txt}>Pie Chart Example</Text>
                        <PieChart
                            data={
                                this.state.data
                            }
                            width={Dimensions.get("window").width} // from react-native
                            height={350}
                            chartConfig={{
                                backgroundColor: "#EC33FF",
                                backgroundGradientFrom: "#FF5733",
                                backgroundGradientTo: "#FF5770",
                                color: () => 'yellow',
                                labelColor: () => 'black',

                            }}
                            accessor={"product"}
                            backgroundColor={"transparent"}
                            paddingLeft={"20"}
                            center={[10, 50]}
                            absolute
                        />
                    </View>
                </View>
            </ScrollView>




        )
    }



}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 10,
        height: 500
    },
    txt: {
        fontSize: 18,
        textAlign: 'center',
        padding: 15
    }
})

7. As shown in the above example, All charts will display the chart with the help of the following factors

* data => Which is the main factor to display the graph accordingly

* width & height => The graph display section width & height

Leave a Comment