React-native-chart-kit: TypeError: undefined is not an object (evaluating 'dataset.color')

Created on 23 Dec 2019  路  3Comments  路  Source: indiespirit/react-native-chart-kit

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.

Most helpful comment

Try to remove legend param, it worked for me.
legend: [] // optional

All 3 comments

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":"<>","y1":0,"x2":"<>","y2":208}] is not usable as a native method argument

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,

Was this page helpful?
0 / 5 - 0 ratings

Related issues

azui007 picture azui007  路  6Comments

stebogit picture stebogit  路  3Comments

NS-BOBBY-C picture NS-BOBBY-C  路  5Comments

carlojesuscponti picture carlojesuscponti  路  6Comments

Ivanrs297 picture Ivanrs297  路  6Comments