I have same problem in my code. initially you pass empty array const [data, setData] = useState<CampaignSummary[]>([]); that cause issue in chart. If use add wrpper like that
const [loading, setLoading] = useState(true);
const [data, setData] = useState<CampaignSummary[]>([]);
const font = useFont(inter, 12);
useEffect(() => {
const fetchCampaignSummary = async () => {
try {
const response = await axios.get(
'lead-conversion-history',
);
setData(response.data);
setLoading(false)
} catch (error) {
console.log('Error fetching lead campaign summary:', error);
}
};
fetchCampaignSummary();
}, []);
const campaignData = data.map((item: CampaignSummary) => ({
campaignName: item.campaignName,
convertedLeadCount: item.convertedLeadCount,
totalLeadCount: item.totalLeadCount,
}));
if (loading) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color={appColors.primary} />
<Text>Loading chart data...</Text>
</View>
);
}
return (
<CartesianChart
data={campaignData}
xKey="campaignName"
yKeys={['convertedLeadCount', 'totalLeadCount']}
domain={{ y: [0, 50] }}
padding={{ left: 10, right: 10, bottom: 5, top: 15 }}
domainPadding={{ left: 50, right: 50, top: 30 }}
axisOptions={{
font: { fontFamily: 'Arial', fontSize: 10 }, // Update the font as needed
tickCount: { y: 10, x: 5 },
lineColor: '#d4d4d8',
labelColor: appColors.text.light,
}}
>
{({ points, chartBounds }) => (
<BarGroup chartBounds={chartBounds} betweenGroupPadding={0.3} withinGroupPadding={0.1}>
<BarGroup.Bar points={points.convertedLeadCount} animate={{ type: 'timing' }}>
<LinearGradient
start={vec(0, 0)}
end={vec(0, 500)}
colors={['#c084fc', '#7c3aed90']}
/>
</BarGroup.Bar>
<BarGroup.Bar points={points.totalLeadCount} animate={{ type: 'timing' }}>
<LinearGradient
start={vec(0, 0)}
end={vec(0, 500)}
colors={['#a5f3fc', '#0891b290']}
/>
</BarGroup.Bar>
</BarGroup>
)}
</CartesianChart>
with that logic you won't get the error. I have tested it and it is working