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>
Any help would be greatly appreciated ๐
Thanks in advance!
Top comments (0)