react-native-chart2
react-native-chart2 is a simple module for adding line charts, area charts, or bar charts to your React Native app.
Features
- 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
Getting Started
npm install react-native-chart2 --save
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-chart2
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
)
Usage
var React = ;var RNChart = ; var StyleSheet View Component = React; var styles = StyleSheet; var chartData = name:'BarChart' type:'bar' color:'purple' widthPercent:06 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'; { return <View style=stylescontainer> <RNChart style=styleschart chartData=chartData verticalGridStep=5 xLabels=xLabels/> </View> ; }
Properties
All properties are optional otherwise noted
General
-
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
Known Issues / TODO
- Sample code cleanup
- Needs touch support
- Needs legend
- Stack Bar Chart
- Multi Line Chart
- Scatter/Bubble chart
- Pie chart