Error while updating property 'd' in shadow node of type: RNSVGPath

[smemamian]

I'm using this library but I got this error message:

Error while updating property 'd' in shadow node of type: RNSVGPath

        <View style={{width:'100%',height:'100%'}}>
            <Text style={{fontSize:20,fontWeight:'bold'}}>
            pichart
            </Text>
            <PieChart
              data={chartAnswered}
              width={chartWidth} // from react-native
              height={220}
              chartConfig={{
                backgroundColor: colorConstants.ONE_APP_COLOR,
                backgroundGradientFrom: colorConstants.ONE_APP_COLOR,
                backgroundGradientTo: '#044675',
                color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                style: {
                  borderRadius: 16
                }
              }}
              bezier
              style={{
                marginVertical: 8,
                borderRadius: 16
              }}
            />
          </View>

my data:

chartAnswered:[
      { name: 'Italy', population: Math.random() * 10000 },
      { name: 'Mexico', population: Math.random() * 10000 },
      { name: 'France', population: Math.random() * 10000 },
      { name: 'Argentina', population: Math.random() * 10000 },
      { name: 'Japan', population: Math.random() * 10000 }
    ]

my package.json:

  "dependencies": {
    "jalali-moment": "^3.2.1",
    "moment": "^2.22.2",
    "native-base": "^2.6.1",
    "paths-js": "^0.4.7",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-chart-kit": "^1.1.5",
    "react-native-contacts": "^2.2.2",
    "react-native-document-picker": "^2.1.0",
    "react-native-fs": "^2.11.15",
    "react-native-image-resizer": "^1.0.0",
    "react-native-material-bottom-navigation": "^1.0.0",
    "react-native-progress-bar-animated": "^1.0.6",
    "react-native-slider": "^0.11.0",
    "react-native-svg": "^6.5.2",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.8.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "watchman": "^1.0.0"
  },

[zahrakbri]

Same

[Muriel0603]

react-native link react-native-svg is ok

[smemamian]

any solution?

[leandrodavimg]

In my case, the graph was trying to load the data before being received by the state. So I did the validation.

Example:

{
          // eslint-disable-next-line react/destructuring-assignment
          this.state.dataGrafico.length > 0 && (
          <View style={styles.boxPcn}>
            <Text style={styles.title02}>Seu progresso no PCN</Text>
            <LineChart
              data={{
                labels: this.state.labelGrafico,
                datasets: [{
                  data: this.state.dataGrafico,
                }],
              }}
              width={Dimensions.get('window').width - 40} // from react-native
              height={220}
              chartConfig={{
                backgroundColor: '#fff',
                backgroundGradientFrom: '#fff',
                backgroundGradientTo: '#fff',
                color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                style: {
                  borderRadius: 16,
                },
              }}
              bezier
              style={styles.boxChart}
            />
          </View>
          )
        }

[wikramdas]

I'm using this library but I got this error message:

Error while updating property 'd' in shadow node of type: RNSVGPath

        <View style={{width:'100%',height:'100%'}}>
            <Text style={{fontSize:20,fontWeight:'bold'}}>
            pichart
            </Text>
            <PieChart
              data={chartAnswered}
              width={chartWidth} // from react-native
              height={220}
              chartConfig={{
                backgroundColor: colorConstants.ONE_APP_COLOR,
                backgroundGradientFrom: colorConstants.ONE_APP_COLOR,
                backgroundGradientTo: '#044675',
                color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                style: {
                  borderRadius: 16
                }
              }}
              bezier
              style={{
                marginVertical: 8,
                borderRadius: 16
              }}
            />
          </View>

my data:

chartAnswered:[
      { name: 'Italy', population: Math.random() * 10000 },
      { name: 'Mexico', population: Math.random() * 10000 },
      { name: 'France', population: Math.random() * 10000 },
      { name: 'Argentina', population: Math.random() * 10000 },
      { name: 'Japan', population: Math.random() * 10000 }
    ]

my package.json:

  "dependencies": {
    "jalali-moment": "^3.2.1",
    "moment": "^2.22.2",
    "native-base": "^2.6.1",
    "paths-js": "^0.4.7",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-chart-kit": "^1.1.5",
    "react-native-contacts": "^2.2.2",
    "react-native-document-picker": "^2.1.0",
    "react-native-fs": "^2.11.15",
    "react-native-image-resizer": "^1.0.0",
    "react-native-material-bottom-navigation": "^1.0.0",
    "react-native-progress-bar-animated": "^1.0.6",
    "react-native-slider": "^0.11.0",
    "react-native-svg": "^6.5.2",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.8.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "watchman": "^1.0.0"
  },

You have to pass accessor name in piechart like this

<PieChart
        data={chartAnswered}
        width={graphWidth}
        height={250}
        chartConfig={chartConfig}
        accessor="population"
        backgroundColor="transparent"
        paddingLeft="15"
/>

[saeedtkh]

I have the same issue on andorid :( Any solution?

[JalilAfridi]

on android the react-native-chart-kit was trying to use the data before it was properly set by the state.

a simple solution is to add an indicator until the data is properly loaded . hint (this.setstate({isloading:false,data:[] })) OR use const data =[] in your render method and pass this data directly to the chart without using state

[ekomeidianto]

you must add value of array first befor you load the data from API. example data = [0]