TypeError: Cannot read property 'color' of undefined

[arche-soft]

[willbonde]

@arche-soft did you find a solution to this? I think i am having a similar issue. code:

<BarChart
      data={data}
      chart={{
        backgroundColor: "#e26a00",
        backgroundGradientFrom: "#fb8c00",
        backgroundGradientTo: "#ffa726",
        backgroundGradientToOpacity: 1,
        backgroundGradientFromOpacity: 1,
         decimalPlaces: 2, // optional, defaults to 2dp
         fillShadowGradient: `rgba(255, 255, 255, 1)`,
        color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
        labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
        style: {
          borderRadius: 16
        },
        propsForDots: {
          r: "6",
          strokeWidth: "2",
          stroke: "#ffa726"
        },
        width: dim.width * 0.9,
        height: dim.width * 0.9,
      }}
    />

Results in:

TypeError: Cannot read property 'color' of undefined on AbstractChart.js (169:48)

[guthriet1230]

also experiencing this issue

[saikiranm33]

any fix ???

[ssthil]

I was also facing the same issue: TypeError: Cannot read property 'color' of undefined

🚀 And I have managed to fixed it. ✅

packages and version:

"react": "18.2.0",
 "react-native": "0.71.7",
 "react-native-chart-kit": "^6.12.0",
 "react-native-svg": "^13.9.0"

My code:

const data = {
    labels: ['Oct 22', 'Nov 22', 'Dec 22', 'Jan 23', 'Feb 23'],
    datasets: [
      {
        data: [23.43, 24.5, 24.59, 24.15, 24.24],
        color: (opacity = 1) => `rgba(255, 112, 9, ${opacity})`, // this color property should be included
        strokeWidth: 2,
      },
    ],
  };

// this chartConfig is also required based on your need
const chartConfig = {
    backgroundGradientFrom: '#FFFFFF',
    backgroundGradientTo: '#FFFFFF',
    strokeWidth: 1,
    color: (opacity = 1) => `rgba(22, 39, 102, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(22, 39, 102, ${opacity})`,
    barPercentage: 0.5,
}

<LineChart data={data} width="230" height={256} chartConfig={chartConfig} bezier />