https://github.com/moschan/react-native-histogram
histogram component for React Native
https://github.com/moschan/react-native-histogram
Last synced: 18 days ago
JSON representation
histogram component for React Native
- Host: GitHub
- URL: https://github.com/moschan/react-native-histogram
- Owner: moschan
- License: mit
- Created: 2015-12-31T07:30:33.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-13T15:28:48.000Z (over 8 years ago)
- Last Synced: 2024-08-10T23:11:28.253Z (9 months ago)
- Language: JavaScript
- Size: 289 KB
- Stars: 16
- Watchers: 4
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.json
- License: LICENSE
Awesome Lists containing this project
README
react-native-histogram
===
> histogram component for React Native
[]()[]()
[](https://nodei.co/npm/react-native-histogram/)
Demo
---
Installation
==
```
npm i -S react-native-histogram
```
## Getting Started
Simple
---
```
import Histogram from 'react-native-histogram';
```
Advenced
---
```
import Histogram from 'react-native-histogram';
var HistogramExample = React.createClass({
getInitialState: function() {
return {data: [{}]}
},
componentWillMount: function() {
var row_datas = [];
for (var i=0; i<500; i++) {
row_datas[i] = Math.random() * 100;
}
this.setState({
data: [{ data: row_datas }]
})
},
render: function() {
return (
);
}
});
```
Props
===
data `Default: []`
---
The list of value for histogram. Ex. `[{data: [10, 13, 8, 19, 17]}]`
width `Default: 0`
---
The width of graph.
height `Default: 0`
---
The height of graph.
sprit `Default: 0`
---
Interval of value
TODO
===
- [x] show simple histogram
- [x] show values
- [ ] show balloon
- [ ] show multiple historgams
- [ ] show unit
- [ ] color option
- [ ] animation option
Contributing
==
Of course! Welcome :)
You can use following command in `example` dir:
```
npm run sync
```
During running this command, when you change source to implement/fix something, these changes will sync to `example/node_modules/react-native-histogram/`. You can check your change using example project easily.
License
==
MIT