react-native-chart is a simple module for adding line charts, area charts, or bar charts to your React Native app.
- Define chart components in Javascript file and see rendered charts using Core Graphics and CALayer
- Supports line charts with options to show data points, line fill, customized color, customized labels, etc...
- Supports bar charts
- Supports multiple charts in one view
- Show animation when populating the chart
npm install react-native-chart --save
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-chart
and addRNChart.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNChart.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Click
RNChart.xcodeproj
in the project navigator and go theBuild Settings
tab. Make sure 'All' is toggled on (instead of 'Basic'). Look forHeader Search Paths
and make sure it contains both$(SRCROOT)/../react-native/React
and$(SRCROOT)/../../React
- mark both asrecursive
. - Run your project (
Cmd+R
)
var React = require('react-native');
var RNChart = require('react-native-chart');
var {
StyleSheet, View, Component,
} = React;
var styles = StyleSheet.create({
container: {
flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white',
},
chart: {
position: 'absolute', top: 16, left: 4, bottom: 4,right: 16
}
});
var chartData = [
{
name:'BarChart',
type:'bar',
color:'purple',
widthPercent:0.6,
data:[
30, 1, 1, 2, 3, 5, 21, 13, 21, 34, 55, 30
]
},
{
name:'LineChart',
color:'gray',
lineWidth:2,
showDataPoint:false,
data:[
10, 12, 14, 25, 31, 52, 41, 31, 52, 66, 22, 11
]
}
];
var xLabels = ['0','1','2','3','4','5','6','7','8','9','10','11'];
class SimpleChart extends Component {
render() {
return (
<View style={styles.container}>
<RNChart style={styles.chart}
chartData={chartData}
verticalGridStep="5"
xLabels={xLabels}>
</RNChart>
</View>
);
}
}
All properties are optional otherwise noted
-
chartData
(Dictionary) - : one nested block produces one type of chartdata
- (NumberArray) - Y axis values / Requiredname
- (String) - name of the plottype
- (String) - "line" or "bar" / Default: "line"fillColor
- (color) - Line chart only: area fill color / If not specified, the line will not be filledlineWidth
- (CGFloat) - Line chart only: line width / Default: 1.0widthPercent
- (CGFloat) - Bar chart only: [0 - 1.0], 0.1 means very skinny, 1.0 means bars touch each other / Default: 0.5showDataPoint
- (BOOL) - show or hide the data points / Default: falsedataPointColor
- (color) - outline color of the data point / Default: bluedataPointFillColor
- (color) - fill color of the data point / Default: bluedataPointRadius
- (CGFloat) - the circel radius of the data point / Default: 1.0
-
xLabels
(StringArray) - array of all X axis label strings. This determines the X-axis grid as well. Need to match the number of input data inchartData
/ Required -
animationDuration
(CGFloat) - duration of the animation in seconds / Default: 0.3 -
showGrid
(BOOL) - show or hide grid / Default: true -
verticalGridStep
(int) - number of Y axis grids / Default: 3 -
gridColor
(color) - color of the grid / Default: lightgray -
gridLineWidth
(CGFloat) - width of the grid line / Default: 0.5 -
showAxis
(BOOL) - show or hide axis / Default: true -
showXAxisLabels
(BOOL) - show or hide axis labels for the X axis / Default: true -
showYAxisLabels
(BOOL) - show or hide axis labels for the Y axis / Default: true -
axisLineWidth
(CGFloat) - width of the axis line / Default: 1 -
labelFontSize
(CGFloat) - font size of axis labels / Default: 10 -
labelTextColor
(color) - text color of axis labels / Default: gray
- Sample code cleanup
- Needs touch support
- Needs legend
- Stack Bar Chart
- Multi Line Chart
- Scatter/Bubble chart
- Pie chart
Email [email protected]