Chart appears but bar values don't

[xmljim]

Hi Jay,

I have a really super simple chart that I generate from some data from web service, I pass the data into the component and I'm using the useEffect hook to render the chart. Here's the code:

export const RetirementChart = ({retirementData}) => {

    const [chart, setChart] = useState(null);
   

    useEffect(() => {
        if (retirementData && retirementData.coefficients) {
            let retirementSchedule = retirementData.coefficients.find(coeff => coeff.name === 'retirementSchedule');


            if (retirementSchedule && retirementSchedule.value) {
                const labelArray = [];
                const dataArray = [];
                const backgroundColorArray = [];
                const borderColorArray = [];

                retirementSchedule.value.forEach(entry => {
                    labelArray.push(entry.year.toString());
                    let balance = parseFloat(entry.balance.toFixed(2));
                    dataArray.push(balance);
                    backgroundColorArray.push('rgba(60, 179, 113, .75)');
                    borderColorArray.push('rgba(0,0,0,1)');
                });

                let data = {
                    datasets: [
                        {
                            labels: labelArray,
                            data: dataArray,
                            label: "Estimated Balance"
                        }
                    ],
                    borderWidth: 1,
                    backgroundColor: backgroundColorArray,
                    borderColor: borderColorArray,
                };

                let theChart = <Bar data={data}/>
                setChart(theChart);

            }
        }
    }, []);

    return (
        <div>
            {chart}
        </div>
    )
};

So when I call the service, the data definitely comes back, and I can see the chart, with the Y-axis correctly scaled to the data, but I just don't see any bar values.

Maybe I'm missing something else. Can you point me in the right direction. Thanks for your help.

[jhonnold]

Try just setting the data in as state and rendering the BarChart directly with the state passed in as a prop. I'm unfamiliar with setting a component as a state value, but that seems like an anti-pattern.

Also make sure your useEffect is being called again once the service call completes, it looks like for the wrapping component it will only set the data once on mount, but will not update if the property changes due to [] as your second parameter in useEffect.