0
130
ViewsCannot read properties of undefined with react-chartjs-2 and chart js problem
When I want to use react chartjs it is giving me these errors
The version I use for chart.js is ^3.5.0 and ^4.0.1 for react-chartjs-2
I downgrade it to version 2 but it didn't work
Chart component codes
import React from 'react'
import { Bar } from 'react-chartjs-2'
import { Chart as ChartJS } from 'chart.js/auto'
function Chart({ chartData }) {
return <Bar data={chartData} />
}
export default Chart
Main component
const [data, setData] = useState({
labels: UserData.map((data) => data.year),
datasets: [
{
label: 'Users Gained',
data: UserData.map((data) => data.userGain),
},
],
})
<Chart chartData={data} />
Data
export const UserData = [
{
id: 1,
year: 2016,
userGain: 80000,
userLost: 823,
},
{
id: 2,
year: 2017,
userGain: 45677,
userLost: 345,
},
{
id: 3,
year: 2018,
userGain: 78888,
userLost: 555,
},
{
id: 4,
year: 2019,
userGain: 90000,
userLost: 4555,
},
{
id: 5,
year: 2020,
userGain: 4300,
userLost: 234,
},
]
·
Juan Pablo Isaza
2 answers
Answer question0
The problem may be related to the way you import/read the UserData. Assuming the data is defined in UserData.js, you could import it as follows:
import { UserData } from './UserData.js';
Please take a look at this StackBlitz and see how it could work with your code.
·
Juan Pablo Isaza
Report
0
in Main component:
import { UserData } from './UserData.js';
import React from 'react'
const [data, setData] = React.useState({
labels: UserData?.map((data) => data.year),
datasets: [
{
label: 'Users Gained',
data: UserData?.map((data) => data.userGain),
},
],
})
<Chart chartData={data} />
·
Juan Pablo Isaza
Report
Answer question