The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates. https://www.npmjs.com/package/react-native-gifted-charts
Go to file
Abhinandan Kushwaha 00b04666f6 Added textShiftX and textShiftY props to LineChart 2021-08-13 20:08:57 +05:30
__tests__ initial commit 2021-07-30 18:38:12 +05:30
android initial commit 2021-07-30 18:38:12 +05:30
demos Add files via upload 2021-08-12 19:43:41 +05:30
docs Added textShiftX and textShiftY props to LineChart 2021-08-13 20:08:57 +05:30
examples Added sideWidth, centralLabel and roundToDigits props 2021-08-12 20:02:44 +05:30
ios Added Bar, Pie, Line and Area Charts 2021-08-02 00:50:13 +05:30
src Added textShiftX and textShiftY props to LineChart 2021-08-13 20:08:57 +05:30
.buckconfig initial commit 2021-07-30 18:38:12 +05:30
.editorconfig initial commit 2021-07-30 18:38:12 +05:30
.eslintrc.js initial commit 2021-07-30 18:38:12 +05:30
.flowconfig initial commit 2021-07-30 18:38:12 +05:30
.gitattributes initial commit 2021-07-30 18:38:12 +05:30
.gitignore initial commit 2021-07-30 18:38:12 +05:30
.prettierrc.js initial commit 2021-07-30 18:38:12 +05:30
.watchmanconfig initial commit 2021-07-30 18:38:12 +05:30
App.js Added textShiftX and textShiftY props to LineChart 2021-08-13 20:08:57 +05:30
README.md Added textShiftX and textShiftY props to LineChart 2021-08-13 20:08:57 +05:30
app.json initial commit 2021-07-30 18:38:12 +05:30
babel.config.js initial commit 2021-07-30 18:38:12 +05:30
index.js initial commit 2021-07-30 18:38:12 +05:30
metro.config.js initial commit 2021-07-30 18:38:12 +05:30
package-lock.json Added Bar, Pie, Line and Area Charts 2021-08-02 00:50:13 +05:30
package.json Added origin label at y axis 2021-08-11 14:55:56 +05:30
yarn.lock initial commit 2021-07-30 18:38:12 +05:30

README.md

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.

Yet another chart library? Why?

To bring Life to your data

  1. Plenty of features with minimal code
  2. Apply animations to your charts on load and on value change, just by adding a prop
  3. Smooth animations implemented using LayoutAnimation
  4. Clickable and scrollable
  5. Three-D and gradient effects
  6. Fully customizable
  7. Detailed documentation with examples

alt text alt text alt text alt text alt text alt text


Installation

npm install react-native-gifted-charts react-native-linear-gradient react-native-svg

For Pie chart and Donut chart, these additional packages should be installed-

npm i react-native-canvas react-native-webview

You can omit the above packages if you don't intend to use Pie chart or Donut chart.

For iOS-

cd ios && pod install

Docs

Documentation and gallery

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 tables

1. BarChart, Horizontal BarChart and Stacked Bar Chart props
2. LineChart and AreaChart props
3. PieChart and DonutChart props

Contributing

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

License

MIT