https://github.com/codesinghanoop/react-native-d3multiline-chart
Animated Android and iOS multiline/line/scatterPoint chart based on d3.js 🤘😎🤘
https://github.com/codesinghanoop/react-native-d3multiline-chart
android animation chart charts d3js d3v4 graph ios legend line line-graph multiline multiline-graph react-native-svg running-line-animation scatterpoint scatterpoint-graph
Last synced: 2 months ago
JSON representation
Animated Android and iOS multiline/line/scatterPoint chart based on d3.js 🤘😎🤘
- Host: GitHub
- URL: https://github.com/codesinghanoop/react-native-d3multiline-chart
- Owner: codesinghanoop
- License: apache-2.0
- Created: 2017-08-13T10:34:47.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2021-09-21T05:40:06.000Z (over 4 years ago)
- Last Synced: 2025-07-07T08:05:33.012Z (11 months ago)
- Topics: android, animation, chart, charts, d3js, d3v4, graph, ios, legend, line, line-graph, multiline, multiline-graph, react-native-svg, running-line-animation, scatterpoint, scatterpoint-graph
- Language: JavaScript
- Homepage:
- Size: 1.86 MB
- Stars: 43
- Watchers: 3
- Forks: 15
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 (
);
}
}
----------
**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](https://github.com/tomauty/react-native-chart) and [react-native-pathjs-charts](https://github.com/capitalone/react-native-pathjs-charts).
- [https://github.com/capitalone/react-native-pathjs-charts/issues/40](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