Example of Creating Bezier Chart in React Native iOS Android

Bezier line chart is a little bit different then the normal line chart. In line chart we would see straight lines between two points but in Bezier chart the lines will not be straight and draw with some curves. In Bezier Line chart we would interpolate two or multiple data points on a chart with curved lines. In react native we can make this chart using react-native-chart-kit NPM package. I have already make a tutorial on this npm package for creating line chart you can read it from here. So in this tutorial we would learn about Example of Creating Bezier Chart in React Native iOS Android.

Contents in this project Example of Creating Bezier Chart in React Native iOS Android :-

1. Friends before doing any coding stuff, we have to install the react-native-chart-kit NPM package in our react native project. So open your react native project Root directory and execute both below commands. Using the first command we would install the Chart Kit NPM package and using the other command we would install the SVG package which is necessary for this library.

npm install react-native-chart-kit --save

1	npm install react-native-chart-kit --save

npm install react-native-svg --save

1	npm install react-native-svg --save

Screenshot :-

2. Now the 2nd step is only for iOS users. To link the library with iOS project we have to install the PODS in our iOS project. So execute below command to install PODS.

cd ios && pod install && cd ..

1	cd ios && pod install && cd ..

3. Now its time to start coding for the app. So open your project’s main App.js file and import View, StyleSheet, Text and Dimensions component.

import React from 'react';

import { View, StyleSheet, Text, Alert, Dimensions } from 'react-native';

import React from 'react';

import { View, StyleSheet, Text, Alert, Dimensions } from 'react-native';

4. Importing LineChart component from “react-native-chart-kit”.

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

1	import { LineChart } from "react-native-chart-kit";

5. Creating a constant named as screenWidth. Here we would get the total device screen width using Dimensions api. Using this constant we would set the chart width.

const screenWidth = Dimensions.get("window").width;

1	const screenWidth = Dimensions.get("window").width;

6. Creating our main Export default component App.

export default function App() {



}

export default function App() {

}

7. Creating a Constant named as data, In this constant we would define all the Chart data line labels and their values and color.

  const data = {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    datasets: [
      {
        data: [10, 50, 17, 40, 15],
        color: (opacity = 1) => '#ECEFF1', // optional
        strokeWidth: 2 // optional
      }
    ],
    legend: ["Sales Chart"] // optional
  };

const data = {

labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],

datasets: [

{

data: [10, 50, 17, 40, 15],

color: (opacity = 1) => '#ECEFF1', // optional

strokeWidth: 2 // optional

}

legend: ["Sales Chart"] // optional

};

8. Creating Return() block, Now here we would make the Line Chart component and pass a Prop bezier. This prop will make the Straight line chart into bezier cured line chart.

    <View style={styleSheet.MainContainer}>

        <LineChart
          data={data}
          width={screenWidth}
          height={220}
          chartConfig={{
            backgroundColor: '#1cc910',
            backgroundGradientFrom: '#458336',
            backgroundGradientTo: '#458336',
            decimalPlaces: 2, // optional, defaults to 2dp
            color: (opacity = 255) => '#ECEFF1',
          }}
          bezier
          yAxisLabel={'$ - '}
          style={{marginLeft: 5, marginRight: 5, borderRadius: 7}}
        />

        <Text style={{ fontSize: 28, textAlign: 'center' }}> Bezier LineChart in React Native </Text>

    </View>
  );

<LineChart

data={data}

width={screenWidth}

height={220}

chartConfig={{

backgroundColor: '#1cc910',

backgroundGradientFrom: '#458336',

backgroundGradientTo: '#458336',

decimalPlaces: 2, // optional, defaults to 2dp

color: (opacity = 255) => '#ECEFF1',

}}

bezier

yAxisLabel={'$ - '}

style={{marginLeft: 5, marginRight: 5, borderRadius: 7}}

<Text style={{ fontSize: 28, textAlign: 'center' }}> Bezier LineChart in React Native </Text>

</View>

);

9. Creating Style.

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }

});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

alignItems: 'center',

justifyContent: 'center'

}

});

10. Complete Source Code for App.js file :

import React from 'react';

import { View, StyleSheet, Text, Alert, Dimensions } from 'react-native';

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

const screenWidth = Dimensions.get("window").width;

export default function App() {

  const data = {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    datasets: [
      {
        data: [10, 50, 17, 40, 15],
        color: (opacity = 1) => '#ECEFF1', // optional
        strokeWidth: 2 // optional
      }
    ],
    legend: ["Sales Chart"] // optional
  };

  return (

    <View style={styleSheet.MainContainer}>

        <LineChart
          data={data}
          width={screenWidth}
          height={220}
          chartConfig={{
            backgroundColor: '#1cc910',
            backgroundGradientFrom: '#458336',
            backgroundGradientTo: '#458336',
            decimalPlaces: 2, // optional, defaults to 2dp
            color: (opacity = 255) => '#ECEFF1',
          }}
          bezier
          yAxisLabel={'$ - '}
          style={{marginLeft: 5, marginRight: 5, borderRadius: 7}}
        />

        <Text style={{ fontSize: 28, textAlign: 'center' }}> Bezier LineChart in React Native </Text>

    </View>
  );
}

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }

});