How do I get my reactjs pie chart display?

Question

My react pie chart returns a blank screen when I try displaying a calculated percentage on a set of dummy values.

This the code for the calculation:

const expectedPercentage = totalExpected > 0 ? (totalExpected / totalCollected) * 100 : 0;
const collectedPercentage = totalCollected > 0 ? (totalCollected / totalExpected) * 100 :0;

<PieChart className='pie-chart-container'
expectedPercentage={expectedPercentage}
collectedPercentage={collectedPercentage}
/>

And I'm expecting it to display on a piechart by parsing it as above.

import React from 'react';
import { Pie } from 'react-chartjs-2';
import {Chart, ArcElement} from 'chart.js'
Chart.register(ArcElement);

const PieChart = ({ expectedPercentage, collectedPercentage }) => {
const data = {
labels: ['Expected', 'Collected'],
datasets: [
{
data: [expectedPercentage, collectedPercentage],
backgroundColor: ['#FF6384', '#36A2EB']
}
]
};
return <Pie data={data} />;
};
export default PieChart;

Answer 1

did you verify if expectedPercentage and collectedPercentage are not null or equal to 0 ? because if in any way they are the Chart won't be displayed.(this should've been a comment but I can't)