Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomauty/react-native-chart
[NOT MAINTAINED] :bar_chart: Add line, area, pie, and bar charts to your React Native app
https://github.com/tomauty/react-native-chart
chart javascript react-native svg
Last synced: 28 days ago
JSON representation
[NOT MAINTAINED] :bar_chart: Add line, area, pie, and bar charts to your React Native app
- Host: GitHub
- URL: https://github.com/tomauty/react-native-chart
- Owner: tomauty
- License: mit
- Created: 2015-04-29T20:31:35.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2020-04-24T14:19:20.000Z (about 4 years ago)
- Last Synced: 2024-04-17T02:10:57.500Z (about 1 month ago)
- Topics: chart, javascript, react-native, svg
- Language: JavaScript
- Homepage: http://tomauty.github.io/react-native-chart
- Size: 608 KB
- Stars: 1,576
- Watchers: 46
- Forks: 240
- Open Issues: 59
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-react-native - react-native-chart ★1464 - React-native-chart is a simple module for adding line charts, area charts, or bar charts to your React Native app. (Components / UI)
- awesome-ui-component-library - React Native Chart - native-chart.svg?label=&style=social)](https://github.com/tomauty/react-native-chart) - Add line, area, pie, and bar charts to your React Native app (React Native / Special use case libraries)
- awesome-stars - tomauty/react-native-chart - [NOT MAINTAINED] :bar_chart: Add line, area, pie, and bar charts to your React Native app (JavaScript)
- awesome-stars - react-native-chart - :bar_chart: Add line, area, pie, and bar charts to your React Native app (JavaScript)
- awesome-react-native - react-native-chart
- awesome-ui-components - React Native Chart - native-chart.svg?label=&style=social)](https://github.com/tomauty/react-native-chart) - Add line, area, pie, and bar charts to your React Native app (React Native / Special use case libraries)
README
# react-native-chart
### NOTE: I have not been able to maintain this repo. Recommend switching to [Victory Charts](https://github.com/FormidableLabs/victory-native).
## Getting Started
[](https://nodei.co/npm/react-native-chart/)
1. `npm i react-native-chart --save`
__Link ART to your project__
1. Right click Libraries and click 'Add Files to {YourProject}'
2. Navigate to your project's node_modules/react-native/Libraries/ART and select 'ART.xcodeproj'
3. Go to Build Phases -> Link Binary With Libraries
4 Click the '+', and add libART.a
Then rebuild.
## Usage
```javascript
import React, { StyleSheet, View, Component } from 'react-native';
import Chart from 'react-native-chart';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
chart: {
width: 200,
height: 200,
},
});
const data = [[
[0, 1],
[1, 3],
[3, 7],
[4, 9],
]];
class SimpleChart extends Component {
render() {
return (
);
}
}
```
## Properties
Use '' y-values to signify the 'render but empty' data points.
| Property | Type | Description | Required | Default |
| ----------------------- | ------------------------- | --------------------------------------------------------- | -------- | --------------------- |
| data | Array< Array< [number, number] > > | An array of arrays of [x, y] pairs. | **Yes** | |
| type | string | pie/bar/line | **Yes** | bar |
| color | Array < string > | Color of bars/line in line chart | No | #4DC4E6 |
| cornerRadius | number | Corner radius of bars in bar chart | No | 0 |
| fillColor | Array < string > | Fill area colors in line chart | No | |
| dataPointColor | Array < string > | Stroke colors for line chart data point | No | |
| dataPointFillColor | Array < string > | Fill colors for line chart data point | No | |
| dataPointRadius | number | Radius of the data point | No | 3 |
| lineWidth | number | Width of line chart line | No | 1 |
| showDataPoint | boolean | Show data points on line chart | No | false |
| sliceColors | Array < string > | Array of colors for pie chart slices | **Yes** | [ < random colors > ] |
| axisColor | string | Color of axis lines | No | #333333 |
| axisLabelColor | string | Color of axis test | No | #333333 |
| axisLineWidth | number | Width of axis lines | No | 1 |
| gridColor | string | Color of grid lines | No | #333333 |
| gridLineWidth | number | Width of grid lines | No | 0.5 |
| hideHorizontalGridLines | boolean | Hide grid lines going from LTR | No | false |
| hideVerticalGridLines | boolean | Hide grid lines going up -> down | No | false |
| showAxis | boolean | Show the X and Y axes | No | true |
| showGrid | boolean | Show the grid | No | true |
| showXAxisLabels | boolean | Show X-Axis labels | No | true |
| showYAxisLabels | boolean | Show Y-Axis labels | No | true |
| style | object | Style on the container | No | {} |
| tightBounds | boolean | Tighten min and max bounds strictly to min/max in dataset | No | false |
| verticalGridStep | number | How many vertical grid lines to show | No | 4 |
| horizontalGridStep | number | How many horizontal grid lines to show | No | all |
| xAxisHeight | number | Height of X-axis container | No | 20 |
| yAxisTransform | Function | Transform data point to y-axis label | No | (_) => _ |
| xAxisTransform | Function | Transform data point to x-axis label | No | (_) => _ |
| yAxisWidth | number | Width of the Y-axis container | No | 30 |
| yAxisUseDecimal | boolean | Show decimals on Y-axis labels | No | false |
| yAxisShortLabel | boolean | Shorten yAxis labels with K, M, B for thousand<->billion, etc | No | false |
## TODO
- [ ] Code cleanup
- [X] Multi-line chart
- [ ] Horizontal line chart
- [ ] Scatter chart