React-native-chart-kit: Barchart Doesnt Work

[tcagkansokmen]

                  <BarChart
                    data={{
                      labels: ["January", "February", "March", "April", "May", "June"],
                      datasets: [
                        {
                          data: [20, 45, 28, 80, 99, 43]
                        }
                      ]
                    }}
                    width={screenWidth}
                    height={220}
                    backgroundColor="transparent"
                    paddingLeft="0"
                    absolute
                    chartConfig={{
                      backgroundColor: "#fff",
                      backgroundGradientFrom: "#fff",
                      backgroundGradientTo: "#fff",
                      decimalPlaces: 0, // optional, defaults to 2dp
                      color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                      labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                      style: {
                        borderRadius: 16
                      },
                      propsForDots: {
                        r: "6",
                        strokeWidth: "2",
                        stroke: "#ffa726"
                      }
                    }}
                  />

code doesnt work.
"undefined is not and object (evaluating 'data.map')"

[daniloebr]

same problem after V6.6.0

[ParthNandaniya]

@daniloebr which version to consider to avoid this issue for now, i'm having same issue ?

[daniloebr]

@ParthNandaniya

I was working with V6.5 using linechart and barchart for my project with no problem, I just updated to the new version because they added custom color for each bar in barchart, but this merge broke the barchart.

[ericmackrodt]

I'm having the same issue with both 6.5 and 6.7, I tried the example you posted as well and it's broken.

[daniloebr]

Make sure you are not missing any BarChartProps that is not optional in your current version.

export interface BarChartProps extends AbstractChartProps {
    data: ChartData;
    width: number;
    height: number;
    fromZero?: boolean;
    withInnerLines?: boolean;
    yAxisLabel: string;
    yAxisSuffix: string;
    chartConfig: AbstractChartConfig;
    style?: Partial;
    horizontalLabelRotation?: number;
    verticalLabelRotation?: number;
    /**
     * Show vertical labels - default: True.
     */
    withVerticalLabels?: boolean;
    /**
     * Show horizontal labels - default: True.
     */
    withHorizontalLabels?: boolean;
    /**
     * The number of horizontal lines
     */
    segments?: number;
    showBarTops?: boolean;
    showValuesOnTopOfBars?: boolean;
    withCustomBarColorFromData?: boolean;
    flatColor?: boolean;
}

In this case I must specify data, width, height, yAxisLabel, yAxisSuffix and chartConfig

[qskeksq]

Check out pull-request #429

for BarChart, there should be 'data' attribute in chartConfig from release 6.7

after adding data, it worked for me

const dataset = {
    labels: ["january", "february", "may"],
    datasets: [
      {
        data: [100, 500, 300],
        colors: [
          (opacity = 1) => `red`,
          (opacity = 1) => `#ff00ff`,
          (opacity = 1) => `rgba(255, 0, 50, ${opacity})`,
        ]
      }
    ]
  }

<BarChart
      data={dataset}
      width={300}
      height={220}
      withCustomBarColorFromData={true}
      flatColor={true}
      chartConfig={{
        backgroundColor: '#ffffff',
        backgroundGradientFrom: '#ffffff',
        backgroundGradientTo: '#ffffff',
        data: dataset.datasets,
        color: (opacity = 1) => '#fff',
        labelColor: () => '#6a6a6a',
      }}
/>

[mostafabrazi]

same problem after V6.6.0

Even before, i have the same issue with the version "react-native-chart-kit": "^6.5.0".
Fortunately, thanks to @qskeksq 😉

[Byusa]

Thanks for this library. This should be on the documentation. Please update.