react-native-d3multiline-chart v1.0.19
react-native-d3multiline-chart
Android and iOS multiline/line/scatterPoint chart based on d3.js
Getting Started
- Step 1- npm install react-native-d3multiline-chart --save or yarn add react-native-d3multiline-chart --save
- Step 2- react-native link react-native-svg
Step 3- Build the project and watch the beauty.
Try the example app
Usage Note: In case of any misunderstanding please go through the example.
import { MultiLineChart } from 'react-native-d3multiline-chart'
//default data is available
var data =[ [{
"y": "202",
"x": 2000
}, {
"y": "215",
"x": 2001
}, {
"y": "179",
"x": 2002
}, {
"y": "199",
"x": 2003
}, {
"y": "134",
"x": 2003
}, {
"y": "176",
"x": 2010
}],
[{
"y": "152",
"x": 2000
}, {
"y": "189",
"x": 2002
}, {
"y": "179",
"x": 2004
}, {
"y": "199",
"x": 2006
}, {
"y": "134",
"x": 2008
}, {
"y": "176",
"x": 2010
}]
]
//default data is available
let leftAxisData = [
134,144,154,164,174,184,194,204,215
]
//default data is available
let bottomAxisData = [
2000,2002,2004,2006,2008,2010
]
let legendColor = ['#00b7d4','red']
let legendText = ['sales','year']
let minX= 2000, maxX= 2010
let minY= 134, maxY= 215
//since there are only two lines
var Color = ['#00b7d4','red']
render() {
return (
<View style={styles.container}>
<MultiLineChart data= {data} leftAxisData= {leftAxisData} bottomAxisData= {bottomAxisData} legendColor= {legendColor}
legendText= {legendText} minX= {minX} maxX= {maxX} minY= {minY} maxY= {maxY} scatterPlotEnable= {false} dataPointsVisible= {true} Color= {Color} />
</View>
);
}
}Features
Add line graph,multiline graph and scatter point graph (by enabling scatterPlotEnable)
Desired color to the lines as well as the data points, data points are apperaring at perfect positions with perfect fill color and highlight of radius is working fine, these functionality is not appropriately provided by react-native-charts and react-native-pathjs-charts
Legends are available in the chart, this is the missing feature in react-native-charts and react-native-pathjs-charts.
https://github.com/capitalone/react-native-pathjs-charts/issues/40 enhancement is added in this library.
Properties
| Name | Type |
|---|---|
| data | PropTypes.array |
| leftAxisData | propTypes.array |
| bottomAxisData | propTypes.array |
| leftAxisDataToShow | propTypes.array |
| bottomAxisDataToShow | propTypes.array |
| legendColor | propTypes.array |
| legendText | propTypes.array |
| minX | propTypes.number |
| minY | propTypes.number |
| maxX | propTypes.number |
| maxY | propTypes.number |
| scatterPlotEnable | propTypes.bool |
| dataPointsVisible | propTypes.bool |
| hideAxis | propTypes.bool |
| hideXAxisLabels | propTypes.bool |
| hideYAxisLabels | propTypes.bool |
| showLegends | propTypes.bool |
| axisColor | propTypes.string |
| axisLabelColor | propTypes.string |
| axisLineWidth | propTypes.number |
| chartFontSize | propTypes.number |
| Color | propTypes.array |
| chartHeight | propTypes.number |
| chartWidth | propTypes.number |
| tickColorXAxis | propTypes.string |
| tickColorYAxis | propTypes.string |
| tickWidthXAxis | propTypes.number |
| tickWidthYAxis | propTypes.number |
| lineWidth | propTypes.number |
| circleRadiusWidth | propTypes.number |
| circleRadius | propTypes.number |
| showTicks | propTypes.bool |
| legendStyle | propTypes.object |
| showDashedLine | propTypes.bool |
| lineStrokeDashArray | propTypes.array |
| lineStrokeOpacity | propTypes.number |
| GraphWidth | propTypes.number |
| GraphHeight | propTypes.number |
| pointDataToShowOnGraph | propTypes.string |
| circleLegendType | propTypes.bool |
| fillArea | propTypes.bool |
| yAxisGrid | propTypes.bool |
| xAxisGrid | propTypes.bool |
| hideXAxis | propTypes.bool |
| hideYAxis | propTypes.bool |
| inclindTick | propTypes.bool |
| animation | propTypes.bool |
| duration | propTypes.number |
| delay | propTypes.number |
| staggerLength | propTypes.number |
| speed | propTypes.number |
Todo list:-
Add animation to the graph
Implement draw line animation - Check (Thanks Waheguruji 🙏)
Add Stagger animation in data points - Check
Add test
Add custom legend - Check (Two kind of legend available, circle and rectangle)
Author
Anoop Singh (codesingh)
Email: anoop100singh@gmail.com
Stack Overflow: codesingh(username)License
Apache-2.0