React Native Chart Kit Contribution Example
Jun 02, 2021 . Admin
Hi Guys,
Today, I will learn you how to use chart kit contribution chart in react native. we will show example of react native chart kit contribution chart.You can easily create contribution chart in react native. First i will import react-native-chart-kit and react-native-svg, after I will create chart kit contribution chart in react native.
Here, I will give you full example for simply display chart kit contribution chart using react native as bellow.
Step 1 - Create projectIn the first step Run the following command for create project.
expo init ChartProjectStep 2 - Install Package
In the step,I will install yarn add react-native-chart-kit package.
yarn add react-native-chart-kitAfter,I will install yarn add react-native-svg package.
yarn add react-native-svgStep 3 - App.js
In this step, You will open App.js file and put the code.
import React, { Component } from "react"; import {View,StyleSheet,Text,Dimensions} from 'react-native'; import { Provider,Appbar} from 'react-native-paper'; import { ContributionGraph } from "react-native-chart-kit"; const MyWebtutsComponent = () => { const data = [ { date: "2021-01-02", count: 7 }, { date: "2021-01-03", count: 2 }, { date: "2021-01-04", count: 3 }, { date: "2021-01-05", count: 4 }, { date: "2021-01-06", count: 5 }, { date: "2021-01-30", count: 2 }, { date: "2021-01-31", count: 3 }, { date: "2021-12-25", count: 6 }, { date: "2021-02-02", count: 4 }, { date: "2021-12-05", count: 2 }, { date: "2020-12-15", count: 5 } ]; const _goBack = () => console.log('Went back'); const _handleSearch = () => console.log('Searching'); const _handleMore = () => console.log('Shown more'); return ( <Provider> <Appbar.Header style={styles.header}> <Appbar.BackAction onPress={_goBack} /> <Appbar.Content title="My App" subtitle="Subtitle" /> <Appbar.Action icon="magnify" onPress={_handleSearch} /> <Appbar.Action icon="dots-vertical" onPress={_handleMore} /> </Appbar.Header> <View style={styles.mainbox}> <Text style={styles.title}>Contribution Graph - MyWebtuts.com</Text> <ContributionGraph values={data} endDate={new Date("2021-05-01")} width={335} height={220} chartConfig={{ backgroundGradientFrom: "#e2e2e2", backgroundGradientTo: "#e2e2e2", decimalPlaces: 2, // optional, defaults to 2dp color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, }} style={{ marginVertical: 10, borderRadius: 10 }} /> </View> </Provider> ); }; const styles = StyleSheet.create({ title:{ fontSize: 20, textAlign:'center', }, mainbox:{ textAlign:'center', margin: 10, justifyContent: 'space-between', }, }); export default MyWebtutsComponent;Step 4 - Run project
In the last step run your project using bellow command.
expo startOutput
It will help you..