DEV Community

Cover image for Issue with react-native-pie-chart - Error: "color is mandatory in the series"
Basil Irzeqat
Basil Irzeqat

Posted on

Issue with react-native-pie-chart - Error: "color is mandatory in the series"

Hello everyone ๐Ÿ‘‹

I'm currently working on a React Native project and trying to use the react-native-pie-chart library to display percentage data visually.
However, I'm encountering the following error when running my code:
'color' is mandatory in the series. The invalid slice: 123
I'm not sure what's causing this. I thought I passed the data correctly.
The library seems perfect for what I need, and Iโ€™d really like to use it, but this error is blocking me.

Does anyone know why this is happening? Or maybe have a correct example of how to pass colors with the data?

Hereโ€™s a snippet of my code:

import PieChart from 'react-native-pie-chart';
const pieData = [
statusCounts['Completed'] || 0,
statusCounts['In progress'] || 0,
statusCounts['Canceled'] || 0,
];

const sliceColor = ['#4DB949', '#F49B16', '#CB4759'];

const isValidPieData =
pieData.length === sliceColor.length &&
pieData.every(num => typeof num === 'number');

    <View style={styles.pieChartWrapper}>
      {isValidPieData && pieData.some(v => v > 0) ? (
        <PieChart
          widthAndHeight={widthAndHeight}
          series={pieData}
          sliceColor={sliceColor}
          coverRadius={0.45}
          coverFill={'#FFF'}
        />
      ) : (
        <Text>No project data yet</Text>
      )}

      <View style={styles.gauge}>
        <Text style={styles.totalText}>{totalProjects}</Text>
        <Text style={styles.labelPie}>Total projects</Text>
      </View>
    </View>
Enter fullscreen mode Exit fullscreen mode

Any help would be greatly appreciated ๐Ÿ™
Thanks in advance!

Top comments (0)