react-chart2: Cannot read properties of undefined (reading 'map') - reactjs

Question

I'm trying to create a bar chart with react-chartjs-2, but I'm receiving error:
Cannot read properties of undefined (reading 'map').
It's the first time I'm trying to create a Chart and I'm wondering what should I write differently, what is causing this error.
import React, {useEffect} from 'react'
import styled from 'styled-components';
import {Bar} from 'react-chartjs-2';
const ChartDaily = ({dailyPrices, chartData, setChartData}) => {
const Chart = () => {
setChartData({
labels: ['Open', 'High', 'Low', 'Close', 'Volume'],
datasets: [{
label: 'price',
data : [1, 100, 1000, 10000],
backgroundColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth:1
}]
})
}
useEffect(() => {
Chart();
}, [])
return (
<StyledChart>
<h3>Daily Prices</h3>
<Bar
data={chartData}
options={{
responsive:true,
title: { text: "Daily Chart", display: true },
scales:{
yAxes:{
ticks:{
beginAtZero: true
}
}
}
}}
/>
</StyledChart>
)
}

Answer 1

compare your code with this working example and see what went wrong.
import React from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import faker from 'faker';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
export const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Chart.js Bar Chart',
},
},
};
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
export const data = {
labels,
datasets: [
{
label: 'Dataset 1',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
backgroundColor: 'rgba(255, 99, 132, 0.5)',
},
{
label: 'Dataset 2',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],
};
export function App() {
return <Bar options={options} data={data} />;
}
demo
pay attention that all the examples of react-chartjs-2 written in Typescript so if you are working with jsx not tsx files you may need to check this question:
How do I convert TSX to JSX