Build Elegant Charts With The React Native Gifted Charts Library

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 i react-native-gifted-charts react-native-linear-gradient react-native-svg
import { 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 />


Build Elegant Charts With The React Native Gifted Charts Library

Download Details:

Author: Abhinandan-Kushwaha

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

You Might Be Interested In:

Add Comment