react-native-gifted-charts

The most complete library for Bar, Line, Area, Pie, and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.

Installation

npm install react-native-gifted-charts

Since we will be using LinearGradient, Svg and Canvas-

npm i react-native-linear-gradient react-native-svg react-native-canvas react-native-webview

For iOS-

cd ios && pod install

Usage

The simplest usage of various types of charts can be done as below-

import { BarChart, LineChart, PieChart } from "react-native-gifted-charts";

// ...
const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]

<BarChart data = {data} />
<LineChart data = {data} />
<PieChart data = {data} />

// For Horizontal Bar chart, just add the prop horizontal to the <BarChart/> component
<BarChart data = {data} horizontal />

// For Area chart, just add the prop areaChart to the <LineChart/> component
<LineChart data = {data} areaChart />

// For Donut chart, just add the prop donut to the <PieChart/> component
<PieChart data = {data} donut />

Props table

1. BarChart props
2. LineChart props
3. PieChart props

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT