Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-native-d3multiline-chart with all npm packages installed. Try it out:

var reactNativeD3multilineChart = require("react-native-d3multiline-chart")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-d3multiline-chart v1.0.19

Android and iOS multipleline/line/scatter 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.

  • https://github.com/capitalone/react-native-pathjs-charts/issues/40 enhancement is added in this library.

Properties

NameType
dataPropTypes.array
leftAxisDatapropTypes.array
bottomAxisDatapropTypes.array
leftAxisDataToShowpropTypes.array
bottomAxisDataToShowpropTypes.array
legendColorpropTypes.array
legendTextpropTypes.array
minXpropTypes.number
minYpropTypes.number
maxXpropTypes.number
maxYpropTypes.number
scatterPlotEnablepropTypes.bool
dataPointsVisiblepropTypes.bool
hideAxispropTypes.bool
hideXAxisLabelspropTypes.bool
hideYAxisLabelspropTypes.bool
showLegendspropTypes.bool
axisColorpropTypes.string
axisLabelColorpropTypes.string
axisLineWidthpropTypes.number
chartFontSizepropTypes.number
ColorpropTypes.array
chartHeightpropTypes.number
chartWidthpropTypes.number
tickColorXAxispropTypes.string
tickColorYAxispropTypes.string
tickWidthXAxispropTypes.number
tickWidthYAxispropTypes.number
lineWidthpropTypes.number
circleRadiusWidthpropTypes.number
circleRadiuspropTypes.number
showTickspropTypes.bool
legendStylepropTypes.object
showDashedLinepropTypes.bool
lineStrokeDashArraypropTypes.array
lineStrokeOpacitypropTypes.number
GraphWidthpropTypes.number
GraphHeightpropTypes.number
pointDataToShowOnGraphpropTypes.string
circleLegendTypepropTypes.bool
fillAreapropTypes.bool
yAxisGridpropTypes.bool
xAxisGridpropTypes.bool
hideXAxispropTypes.bool
hideYAxispropTypes.bool
inclindTickpropTypes.bool
animationpropTypes.bool
durationpropTypes.number
delaypropTypes.number
staggerLengthpropTypes.number
speedpropTypes.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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free