the “undefined ” will appear in my Bar chart in react-chartjs

Question

I use the react-chartjs-2 to create a bar chart. I have the data as follow:

const chartData = {
                labels: ['Dealer1', 'Dealer2', 'Dealer3', 'Dealer4', 'Dealer5', 'Dealer6'],
                datasets: [
                    {
                        label: 'Ongoing',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: 'rgb(255, 99, 132)',
                    },
                    {
                        label: 'Stopped',
                        data: [2, 3, 20, 5, 1, 4],
                        backgroundColor: 'rgb(54, 162, 235)',
                    },
                    {
                        label: 'Done',
                        data: [3, 10, 13, 15, 22, 30],
                        backgroundColor: 'rgb(75, 192, 192)',
                    },
                ],
            };

and I will pass it as a property to my component and I will return a bar chart as follow

<div className={`${styles.printReport}`}>
                <React.Fragment>
                    <Layout.Row style={{ justifyContent: "center" }}>
                        <Headline headlineType="h2">{this.props.title}</Headline>
                    </Layout.Row>
                    <Layout.Row style={{ justifyContent: "center" }}>
                        <div style={{ display: 'block', height: 500, width: '95%' }}>
                            <Bar
                                data={
                                    this.props.data
                                }
                                options={options}
                                height={500}
                                width={1000}
 />

But I have the following result

I don't know why it comes "undefined" in the middle of the chart. Do you have any Idea?

Answer 1

I solved the problem as follows. In the Bar component I did the following changes

<Bar
      data={{labels: [...this.props.labels],
             text: this.props.message,
             datasets: this.props.data
                            }}

And instead of passing the chartData to Bar component I passed the chartData.labels and chartData.datasets as properties.