Here is my code for a barChart, the problem is I am retrieving the values correctly from backend and its even showing in the console and it even reflected in the chart a few times but as soon as i refreshed it it went back to showing this can't map to NULL error. even on making changes like parseInt i don't know how it started working but on reloading it didn't.
import ApexCharts from 'apexcharts';
import { useEffect, useRef, useState } from 'react';
function ChartComponent({ DarkMode,budgetData,expenseData }) {
const chartRef = useRef(null);
useEffect(() => {
const options = {
chart: {
type: 'bar'
},
stroke: {
show: false
},
plotOptions: {
bar: {
horizontal: false,
borderRadius: 5,
borderRadiusApplication: 'around'
}
},
colors: ['#CFC3FF', '#5D37F6'],
series: [
{
name: 'budget',
data: budgetData.map(item => parseInt(item.data)) || [0, 0, 0, 0, 0, 0, 0]
},
{
name: 'expenditure',
data: expenseData.map(item => parseFloat(item?.data)) || [0, 0, 0, 0, 0, 0, 0]
}
],
xaxis: {
categories: ['Eudcation', 'Grocery', 'Recreational', 'Family', 'Clothes', 'HealthCare']
}
};
const chart = new ApexCharts(chartRef.current, options);
chart.render();
return () => {
chart.destroy();
};
}, [budgetData, expenseData]);
return <div className={`p-5 w-96 h-80 rounded-[3rem] ${DarkMode ? 'bg-stone-900' : 'bg-white'}`} ref={chartRef} />;
}
export default ChartComponent;
here is my api response in formatted form that im getting in the console :
Array(6)
0
:
{name: 'education', data: '1000.00'}
1
:
{name: 'grocery', data: '1300.00'}
2
:
{name: 'recreational', data: '1000.00'}
3
:
{name: 'family', data: '1400.00'}
4
:
{name: 'clothes', data: '1700.00'}
5
:
{name: 'healthcare', data: '1000'}
length
:
6
[[Prototype]]
:
Array(0)