2021-07-30 13:12:53 +00:00
|
|
|
# react-native-gifted-charts
|
|
|
|
|
2021-08-02 11:13:32 +00:00
|
|
|
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 13:12:53 +00:00
|
|
|
|
2021-08-01 23:25:13 +00:00
|
|
|
![alt text](/demos/line.gif)
|
|
|
|
![alt text](/demos/area.gif)
|
|
|
|
![alt text](/demos/movingBars.gif)
|
|
|
|
|
2021-07-30 13:12:53 +00:00
|
|
|
## Installation
|
|
|
|
|
|
|
|
```sh
|
|
|
|
npm install react-native-gifted-charts
|
|
|
|
```
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
2021-08-02 11:20:24 +00:00
|
|
|
The simplest usage of various types of charts can be done as below-
|
2021-08-02 11:00:43 +00:00
|
|
|
|
2021-07-30 13:12:53 +00:00
|
|
|
```js
|
2021-08-02 11:00:43 +00:00
|
|
|
import { BarChart, LineChart, PieChart } from "react-native-gifted-charts";
|
2021-07-30 13:12:53 +00:00
|
|
|
|
|
|
|
// ...
|
2021-08-02 11:02:45 +00:00
|
|
|
const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
|
2021-08-02 11:00:43 +00:00
|
|
|
|
2021-08-02 11:02:25 +00:00
|
|
|
<BarChart data = {data} />
|
|
|
|
<LineChart data = {data} />
|
|
|
|
<PieChart data = {PieChart} />
|
2021-08-02 11:00:43 +00:00
|
|
|
|
2021-08-02 11:20:24 +00:00
|
|
|
// 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
|
2021-08-02 11:02:25 +00:00
|
|
|
<LineChart data = {data} areaChart />
|
2021-07-30 13:12:53 +00:00
|
|
|
|
2021-08-02 11:20:24 +00:00
|
|
|
// For Donut chart, just add the prop donut to the <PieChart/> component
|
2021-08-02 11:02:25 +00:00
|
|
|
<PieChart data = {data} donut />
|
2021-07-30 13:12:53 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
## Contributing
|
|
|
|
|
|
|
|
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
|
|
|
|
|
|
|
|
## License
|
|
|
|
|
|
|
|
MIT
|