React Native Gifted Charts - Elegant Charts

Create the most beautiful and elegant charts for your React Native application with Gifted Charts. Designed to work with React Native, this library has gathered all the features needed to create a customized chart with live data updates, 2D, 3D and interactive features.

Chart Types:

• Bar Chart (Column,Horizontal, Stacked)
• Line Chart
• Area Chart
• Pie & Donut Chart

More Features:

• Plenty of features with minimal code
• Apply animations to your charts on load and on value change, just by adding a prop
• Smooth animations implemented using LayoutAnimation
• Clickable and scrollable
• Three-D and gradient effects
• Fully customizable

Basic Usage:

1. Install the package and import chart components as follows:

# Yarn
$ yarn add react-native-gifted-charts react-native-linear-gradient react-native-svg

# NPM
$ npm i react-native-gifted-charts react-native-linear-gradient react-native-svgimport { BarChart, LineChart, PieChart } from "react-native-gifted-charts";

2. prepare your data.

const barData = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];

3. Create charts.

// column chart
<BarChart data = {data} />

// line chart
<LineChart data = {data} />

// pie chart
<PieChart data = {data} />

// horizontal bar chart
<BarChart data = {data} horizontal />

// area chart
<LineChart data = {data} areaChart />

// donut chart
<PieChart data = {data} donut />

Previews:

Download Details:

Author: Abhinandan-Kushwaha

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts

License: MIT

#react #reactnative #reactjs