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

CodePudding user response：

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