React Native Pure Chart
Pure react native chart library that not using svg or ART but only using react-native
components.
(You don't have to import drawing library with react-native link
or add ART
to your project!)
Demo
-
LineChart
-
LineChart (Multi series)
-
BarChart
-
BarChart (Multi series)
-
PieChart (Beta)
Installation
yarn add react-native-pure-chart
Alternatively with npm:
npm install react-native-pure-chart --save
Required
;
Usage
Single Series: Simple
;
Single Series: with labels
;
Multi Series: Simple
;
Multi Series: with labels
;
Pie chart
;
Props
type
: string
type of chart. ['line' | 'bar' | 'pie'] is now available
height
: number
height of chart
data
: array
data for chart
var data = 30 200 170 250 10 var dataWithLabel = x: '2017-10-01' y: 30 x: '2017-10-02' y: 200 x: '2017-10-03' y: 170 ...
multi series data for chart
var data = seriesName: 'series1' data: 30 200 170 250 10 color: '#297AB1' seriesName: 'series2' data: 40 250 110 290 14 color: 'blue' var dataWithLabel = seriesName: 'series1' data: x: '2017-10-01' y: 30 x: '2017-10-02' y: 200 x: '2017-10-03' y: 170 ... color: '#297AB1' ...
customValueRenderer
: func
add custom value on the point
<PureChart type='line' data=data width='100%' height=200 customValueRenderer= { if index % 2 === 0 return null return <Text style=textAlign: 'center'>pointy</Text> }/>
numberOfYAxisGuideLine
: number
set number of Y Axis guide line
License
MIT