Bar chart only shows first dataset when rendering batch API response (react-chartjs-2 + React)

[Biimaal]

Description:

I'm building a Shariah Compliance Investment Dashboard using React and react-chartjs-2. I fetch stock data in batch from an API. The response returns valid financial ratio data for each ticker. The console log confirms all tickers are processed. However, the Bar chart only shows the dataset for the first ticker.

Expected:

All tickers from the batch should display as individual datasets on the bar chart.

What I've tried:

• Confirmed API returns valid JSON for all tickers
• Used .map() to build datasets dynamically
• Checked console logs for dataset structure
• Tried restructuring the datasets format but no luck

Relevant Code Snippet:

// Example of how I build chart datasets from API response
const financialData = Object.entries(complianceData).map(([symbol, details]) => ({
label: ${symbol} Financial Ratios,
data: [
details.financial_health_ratios["Current Ratio"],
details.financial_health_ratios["Debt-to-Equity Ratio"],
details.financial_health_ratios["Profit Margin"],
details.financial_health_ratios["Return on Equity"]
],
backgroundColor: 'rgba(75, 192, 192, 0.6)',
}));

// In JSX
<Bar
data={{
labels: ["Current Ratio", "Debt-to-Equity Ratio", "Profit Margin", "Return on Equity"],
datasets: financialData
}}
options={{ responsive: true }}
/>

Sample:

• API Response (truncated or example)
• console.log(dataset)
• Screenshot of chart rendering