codesinghanoop/react-native-d3multiline-chart

Animated Android and iOS multiline/line/scatterPoint chart based on d3.js 🤘😎🤘

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.

• capitalone/react-native-pathjs-charts#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