Apex charts not rendering series value, showing cannot map values of NULL

586 views Asked by At

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)
0

There are 0 answers