ReactNativeSimpleCharts
Simple charts with gradient for react-native.
- Allow to use multiple charts.
- Use chart with gradient filling.
- Customize charts: axis, height, steps OY and more other things.
- Chart automatically scale OY axis data and round OY values to usual perception.
Installation
Just paste in terminal npm install react-native-simple-charts --save && react-native link react-native-simple-charts && react-native link react-native-svg && react-native link react-native-blur
Usage
Simple Charts
... { let greenChartProps = "strokeWidth": 2 "renderPoints": true "strokeColor": 'green' "pointColor1": 'green' "pointColor2": 'green' let blueChartProps = "strokeWidth": 2 "renderPoints": true "strokeColor": 'blue' "pointColor1": 'blue' "pointColor2": 'blue' let data = "chart": "x": '1' "y": 10 "props": greenChartProps "x": '2' "y": 45 "props": greenChartProps "x": '3' "y": 10 "props": greenChartProps "x": '4' "y": 55 "props": greenChartProps "x": '5' "y": 20 "props": greenChartProps "x": '6' "y": 65 "props": greenChartProps "chart": "x": '1' "y": 89 "props": blueChartProps "x": '2' "y": 67 "props": blueChartProps "x": '3' "y": 55 "props": blueChartProps "x": '4' "y": 23 "props": blueChartProps "x": '5' "y": 44 "props": blueChartProps "x": '6' "y": 55 "props": blueChartProps return <Chart data=data stepsOY=5 /> ; }
Gradient Chart
Note if you want to use chart with gradient filling it should be only one.
... { let greenChartProps = "strokeWidth": 2 "renderPoints": true "strokeColor": 'green' "pointColor1": 'green' "pointColor2": 'green' let data = "chart": "x": '1' "y": 10 "props": greenChartProps "x": '2' "y": 45 "props": ...greenChartProps fillGradient: true gradientEndColor: 'green' gradientStartColor: 'yellow' "x": '3' "y": 10 "props": ...greenChartProps fillGradient: true gradientEndColor: 'green' gradientStartColor: 'yellow' "x": '4' "y": 55 "props": greenChartProps "x": '5' "y": 20 "props": greenChartProps "x": '6' "y": 65 "props": greenChartProps return <Chart data=data stepsOY=5 axisTextColorActive='red' activeAxisXTextArray='2' '3' '4' /> ; }
Props
data: ReactPropTypesarrayisRequired height: ReactPropTypesnumber width: ReactPropTypesnumber backgroundColor: ReactPropTypesany gradientOpacityStart: ReactPropTypesstring gradientOpacityEnd: ReactPropTypesstring axisTextColor: ReactPropTypesany axisTextOpacity: ReactPropTypesnumber activeAxisXTextArray: ReactPropTypesarray // you can set unique text color for special OX axis values axisTextColorActive: ReactPropTypesany //there is this color hideXAxe: ReactPropTypesbool hideYAxe: ReactPropTypesbool axisStrokeWidth: ReactPropTypesnumber axisColor: ReactPropTypesany axisOpacity: ReactPropTypesnumber pointRadius: ReactPropTypesnumber // chart point radius axisLinesColor: ReactPropTypesstring // horizontal and vertical chart lines axisLinesOpacity: ReactPropTypesnumber axisLinesWidth: ReactPropTypesnumber renderAxisXSectors: ReactPropTypesbool axisXSectorsColor: ReactPropTypesstring axisXSectorsOpacity: ReactPropTypesnumber renderAxisXLines: ReactPropTypesbool // vertical lines renderAxisYLines: ReactPropTypesbool //horizontal lines leftPanelBG: ReactPropTypesany // OY axis text backgroundColor renderBlur: ReactPropTypesbool // IOS only blured OY axis text blurProps: ReactPropTypesany leftPanelWidth: ReactPropTypesnumber stepsOY: ReactPropTypesnumber // number of section on axis Y scaleXAxis: ReactPropTypesnumber // define chart condensation maxYValue: ReactPropTypesnumber // set max OY value that can be rendered ## Default Props height: 150 backgroundColor: 'white' stepsOY: 4 axisTextColor: 'black' axisTextOpacity: 1 axisColor: 'black' axisOpacity: 1 axisLinesOpacity: 1 axisLinesWidth: 1 axisStrokeWidth: 2 axisLinesColor: 'black' scaleXAxis: 55 renderAxisXLines: true renderAxisYLines: true leftPanelWidth: 50 leftPanelBG: 'white' renderBlur: true gradientOpacityStart: '0.0' gradientOpacityEnd: '0.55'
data
An array of points. This should be provided with an array of objects.
"chart": "x": '1' "y": 10 "props": "strokeWidth": 2 // chart stroke width "strokeColor": 'green' "renderPoints": true "pointColor1": 'green' // this define 1:10 point color "pointColor2": 'green' // this define 2:Y point color (next point) "fillGradient": false // if you set true then gradient will fill area from 1 to 2 OX value "gradientStartColor": 'green' "gradientEndColor": 'green' ... ...
Questions or suggestions?
Feel free to open an issue