2021-07-30 18:42:53 +05:30
|
|
|
# react-native-gifted-charts
|
|
|
|
|
2021-08-02 16:43:32 +05:30
|
|
|
The most complete library for Bar, Line, Area, Pie, and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
|
2021-07-30 18:42:53 +05:30
|
|
|
|
2021-08-05 02:45:46 +05:30
|
|
|
### Yet another chart library? Why?
|
2021-08-05 02:44:35 +05:30
|
|
|
|
2021-08-09 05:24:50 +05:30
|
|
|
**_To bring Life to your data_**
|
|
|
|
|
2021-08-05 02:44:35 +05:30
|
|
|
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
|
|
|
|
|
2021-08-09 05:26:19 +05:30
|
|
|
---
|
|
|
|
|
2021-08-09 05:24:50 +05:30
|
|
|

|
|
|
|

|
2021-08-02 04:55:13 +05:30
|
|
|

|
2021-08-09 05:24:50 +05:30
|
|
|

|
|
|
|

|
|
|
|

|
2021-08-02 04:55:13 +05:30
|
|
|
|
2021-08-09 05:26:19 +05:30
|
|
|
---
|
|
|
|
|
2021-07-30 18:42:53 +05:30
|
|
|
## Installation
|
|
|
|
|
|
|
|
```sh
|
2021-08-07 17:25:16 +05:30
|
|
|
npm install react-native-gifted-charts react-native-linear-gradient react-native-svg
|
2021-07-30 18:42:53 +05:30
|
|
|
```
|
|
|
|
|
2021-08-07 17:25:16 +05:30
|
|
|
For Pie chart and Donut chart, these additional packages should be installed-
|
2021-08-02 20:09:00 +05:30
|
|
|
|
|
|
|
```sh
|
2021-08-07 17:25:16 +05:30
|
|
|
npm i react-native-canvas react-native-webview
|
2021-08-02 20:09:00 +05:30
|
|
|
```
|
|
|
|
|
2021-08-07 17:25:16 +05:30
|
|
|
You can omit the above packages if you don't intend to use Pie chart or Donuut chart.
|
|
|
|
|
2021-08-02 20:09:00 +05:30
|
|
|
For iOS-
|
|
|
|
|
|
|
|
```sh
|
2021-08-02 20:12:26 +05:30
|
|
|
cd ios && pod install
|
2021-08-02 20:09:00 +05:30
|
|
|
```
|
|
|
|
|
2021-07-30 18:42:53 +05:30
|
|
|
## Usage
|
|
|
|
|
2021-08-02 16:50:24 +05:30
|
|
|
The simplest usage of various types of charts can be done as below-
|
2021-08-02 16:30:43 +05:30
|
|
|
|
2021-07-30 18:42:53 +05:30
|
|
|
```js
|
2021-08-02 16:30:43 +05:30
|
|
|
import { BarChart, LineChart, PieChart } from "react-native-gifted-charts";
|
2021-07-30 18:42:53 +05:30
|
|
|
|
|
|
|
// ...
|
2021-08-02 16:32:45 +05:30
|
|
|
const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
|
2021-08-02 16:30:43 +05:30
|
|
|
|
2021-08-02 16:32:25 +05:30
|
|
|
<BarChart data = {data} />
|
|
|
|
<LineChart data = {data} />
|
2021-08-02 16:51:40 +05:30
|
|
|
<PieChart data = {data} />
|
2021-08-02 16:30:43 +05:30
|
|
|
|
2021-08-02 16:50:24 +05:30
|
|
|
// For Horizontal Bar chart, just add the prop horizontal to the <BarChart/> component
|
2021-08-03 18:50:52 +05:30
|
|
|
|
2021-08-02 16:50:24 +05:30
|
|
|
<BarChart data = {data} horizontal />
|
|
|
|
|
|
|
|
// For Area chart, just add the prop areaChart to the <LineChart/> component
|
2021-08-03 18:50:52 +05:30
|
|
|
|
2021-08-02 16:32:25 +05:30
|
|
|
<LineChart data = {data} areaChart />
|
2021-07-30 18:42:53 +05:30
|
|
|
|
2021-08-02 16:50:24 +05:30
|
|
|
// For Donut chart, just add the prop donut to the <PieChart/> component
|
2021-08-03 18:50:52 +05:30
|
|
|
|
2021-08-02 16:32:25 +05:30
|
|
|
<PieChart data = {data} donut />
|
2021-07-30 18:42:53 +05:30
|
|
|
```
|
|
|
|
|
2021-08-03 17:56:35 +05:30
|
|
|
## Props tables
|
2021-08-03 15:36:06 +05:30
|
|
|
|
2021-08-09 04:57:06 +05:30
|
|
|
**[1. BarChart, Horizontal BarChart and Stacked Bar Chart props](docs/BarChart/BarChartProps.md)** \
|
2021-08-03 17:56:35 +05:30
|
|
|
**[2. LineChart and AreaChart props](docs/LineChart/LineChartProps.md)** \
|
|
|
|
**[3. PieChart and DonutChart props](docs/PieChart/PieChartProps.md)**
|
2021-08-03 15:36:06 +05:30
|
|
|
|
2021-07-30 18:42:53 +05:30
|
|
|
## Contributing
|
|
|
|
|
|
|
|
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
|
|
|
|
|
|
|
|
## License
|
|
|
|
|
|
|
|
MIT
|