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: [email protected]
Stack Overflow: codesingh(username)

License

Apache-2.0