Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lintangwisesa/reactnative_chartkit
📉📊📈 Data visualization using React Native & Chart Kit
https://github.com/lintangwisesa/reactnative_chartkit
android chart-kit data-visualization react-native
Last synced: 3 months ago
JSON representation
📉📊📈 Data visualization using React Native & Chart Kit
- Host: GitHub
- URL: https://github.com/lintangwisesa/reactnative_chartkit
- Owner: LintangWisesa
- Created: 2019-10-11T08:35:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:31:03.000Z (about 2 years ago)
- Last Synced: 2023-03-07T10:27:04.804Z (almost 2 years ago)
- Topics: android, chart-kit, data-visualization, react-native
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-chart-kit
- Size: 1.23 MB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README

# Data Visualization using React Native Chart Kit
1. Create a React Native project (I'm using the latest __*RN 0.61.2*__ and __*Genymotion*__ as Android emulator), then install __*react-native-chart-kit*__ and __*react-native-svg*__ package.
```bash
$ npm i react-native-chart-kit react-native-svg
```Then import it, so you can use it to create several charts on your React Native application.
```javascript
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart
} from "react-native-chart-kit";
```#
2. Create a __Line Chart__

```javascript
`white`,
labelColor: (opacity = 1) => `white`,
style: {
borderRadius: 16
}
}}
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
```#
3. Create a __Bezier Line Chart__

```javascript
`white`,
labelColor: (opacity = 1) => `white`,
style: {
borderRadius: 16
}
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
```#
4. Create a __Bar Chart__

```javascript
`black`,
labelColor: (opacity = 1) => `black`,
barPercentage:1,
style: {
borderRadius: 16
}
}}
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
```#
5. Create a __Stacked Bar Chart__

```javascript
`white`,
labelColor: (opacity = 1) => `white`,
style: {
borderRadius: 16
}
}}
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
```#
6. Create a __Pie Chart__

```javascript
`white`,
labelColor: (opacity = 1) => `white`,
style: {
borderRadius: 16
}
}}
backgroundColor="blue"
accessor="population"
paddingLeft="15"
absolute
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
```#
7. Create a __Progress Chart__

```javascript
`rgba(26, 255, 146, ${opacity})`,
strokeWidth: 2, // optional, default 3
}
}
backgroundColor="green"
paddingLeft="15"
absolute
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
```#
8. Create a __Contribution Graph__

```javascript
`rgba(255, 0, 0, ${opacity})`,
strokeWidth: 2, // optional, default 3
}
}
paddingLeft="15"
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
```#
#### Lintang Wisesa :love_letter: [email protected]_
[Facebook](https://www.facebook.com/lintangbagus) |
[Twitter](https://twitter.com/Lintang_Wisesa) |
[Google+](https://plus.google.com/u/0/+LintangWisesa1) |
[Youtube](https://www.youtube.com/user/lintangbagus) |
:octocat: [GitHub](https://github.com/LintangWisesa) |
[Hackster](https://www.hackster.io/lintangwisesa)