0
118
ViewsNo se pueden leer las propiedades de undefined con react-chartjs-2 y el problema chart js
Cuando quiero usar react chartjs me da estos errores
La versión que uso para chart.js es ^3.5.0 y ^4.0.1 para react-chartjs-2
Lo degradé a la versión 2 pero no funcionó
Códigos de componentes del gráfico
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 ChartComponente principal
const [data, setData] = useState({ labels: UserData.map((data) => data.year), datasets: [ { label: 'Users Gained', data: UserData.map((data) => data.userGain), }, ], }) <Chart chartData={data} />Datos
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
El problema puede estar relacionado con la forma en que importa/lee UserData . Suponiendo que los datos estén definidos en UserData.js , podría importarlos de la siguiente manera:
import { UserData } from './UserData.js';Eche un vistazo a este StackBlitz y vea cómo podría funcionar con su código.
·
Juan Pablo Isaza
Report
0
en componente principal:
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