0.0.1 • Published 7 years ago
reactnativesimplecharts v0.0.1
ReactNativeSimpleCharts
A simple charts with gradient for react-native Also you can use multiple charts. Customize charts, axis, height, scale, steps OY, colors and fill chart section with gradient. Chart automatically scale OY axis data and make them normal for user, so you didn't see 12.34 or 0.23123 values.
Installation
npm install react-native-simple-charts --save
oryarn add react-native-simple-charts
react-native link react-native-simple-charts
Usage
Simple Charts
import Chart from 'react-native-simple-charts'
...
render() {
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
import Chart from 'react-native-simple-charts'
...
render() {
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: React.PropTypes.array.isRequired,
height: React.PropTypes.number,
width: React.PropTypes.number,
backgroundColor: React.PropTypes.any,
gradientOpacityStart: React.PropTypes.string,
gradientOpacityEnd: React.PropTypes.string,
axisTextColor: React.PropTypes.any,
axisTextOpacity: React.PropTypes.number,
activeAxisXTextArray: React.PropTypes.array, // you can set unique text color for special OX axis values
axisTextColorActive: React.PropTypes.any, //there is this color
hideXAxe: React.PropTypes.bool,
hideYAxe: React.PropTypes.bool,
axisStrokeWidth: React.PropTypes.number,
axisColor: React.PropTypes.any,
axisOpacity: React.PropTypes.number,
pointRadius: React.PropTypes.number, // chart point radius
axisLinesColor: React.PropTypes.string, // horizontal and vertical chart lines
axisLinesOpacity: React.PropTypes.number,
axisLinesWidth: React.PropTypes.number,
renderAxisXSectors: React.PropTypes.bool,
axisXSectorsColor: React.PropTypes.string,
axisXSectorsOpacity: React.PropTypes.number,
renderAxisXLines: React.PropTypes.bool, // vertical lines
renderAxisYLines: React.PropTypes.bool, //horizontal lines
leftPanelBG: React.PropTypes.any, // OY axis text backgroundColor
renderBlur: React.PropTypes.bool, // IOS only blured OY axis text
blurProps: React.PropTypes.any,
leftPanelWidth: React.PropTypes.number,
stepsOY: React.PropTypes.number, // number of section on axis Y
scaleXAxis: React.PropTypes.number, // define chart condensation
maxYValue: React.PropTypes.number // 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: 5.5,
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. Note if you want fill with gradient special chart parts you need to use only one chart with gradient.
[
{
"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
0.0.1
7 years ago