React-native-chart-kit: Error while updating property 'd' in shadow node of type: RNSVGPath

Created on 18 Aug 2018 · 8Comments · Source: indiespirit/react-native-chart-kit

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"
  },

Source

smemamian

👍2 ❤1 🎉1

Most helpful comment

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>
          )
        }

leandrodavimg on 12 Nov 2018

👍2

All 8 comments

Same

zahrakbri on 21 Aug 2018

react-native link react-native-svg is ok

Muriel0603 on 24 Aug 2018

any solution?

smemamian on 27 Aug 2018

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>
          )
        }

leandrodavimg on 12 Nov 2018

👍2

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"
/>

wikramdas on 18 Dec 2018

👍1

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

saeedtkh on 8 Mar 2019

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