Hi,
I'm just trying to create a line chart using this library but getting following error. The example I'm trying is copied straight from the README document as follows,
My environment:
Platform: Mac OS (iOS)
node: 10.17.0
react-native-cli: 2.0.1
$ npm install --save react-native-chart-kit
$ npm install --save react-native-svg prop-types
$ cd ios; pod install (Was this needed?)
...
Downloading dependencies
Installing RNSVG (9.13.6)
..
Source code:
render() {
const chartConfig = {
backgroundGradientFrom: "#1E2923",
backgroundGradientFromOpacity: 0,
backgroundGradientTo: "#08130D",
backgroundGradientToOpacity: 0.5,
color: ( opacity = 1 ) => `rgba(26, 255, 146, ${opacity})`,
strokeWidth: 2, // optional, default 3
barPercentage: 0.5
};
const data = {
labels: [ "January", "February", "March", "April", "May", "June" ],
datasets: [
{
data: [ 20, 45, 28, 80, 99, 43 ],
color: ( opacity = 1 ) => `rgba(134, 65, 244, ${opacity})`, // optional
strokeWidth: 2 // optional
}
],
legend: [ "Rainy Days", "Sunny Days", "Snowy Days" ] // optional
};
}
return (
<View style={styles.container}>
<Text>Bezier Line Chart</Text>
<LineChart
data={data}
width={screenWidth}
height={256}
verticalLabelRotation={30}
chartConfig={chartConfig}
bezier
/>
</View>
)
Any help is appreciated. TIA.
Try to remove legend param, it worked for me.
legend: [] // optional
@kythanh Thanks. With suggested change, I'm getting different error,
Invariant Violation: [5815,"RNSVGLine",11,{"matrix":[1,0,0,1,0,0],"propList":["stroke","strokeWidth","strokeDasharray"],"opacity":1,"fill":[0,4278190080],"fillRule":1,"fillOpacity":1,"stroke":[0,857407378],"strokeOpacity":1,"strokeLinecap":0,"strokeLinejoin":0,"strokeDasharray":["5","10"],"strokeWidth":1,"strokeDashoffset":null,"strokeMiterlimit":4,"vectorEffect":0,"x1":"<
This error is located at:
in RNSVGLine (at Line.tsx:26)
in Line (at abstract-chart.js:201)
in RNSVGGroup (at G.tsx:28)
in G (at line-chart.js:348)
in RNSVGGroup (at G.tsx:28)
in G (at line-chart.js:315)
in RNSVGGroup (at G.tsx:28)
in G (at Svg.tsx:170)
in RNSVGSvgView (at Svg.tsx:157)
in Svg (at line-chart.js:302)
in RCTView (at line-chart.js:301)
in LineChart (at VDetail.js:225)
@kythanh After cleaning up project directory, the example worked. Thanks,
Most helpful comment
Try to remove legend param, it worked for me.
legend: [] // optional