Estoy trabajando en una aplicación React donde quiero mostrar gráficos. Traté de usar react-chartjs-2 pero no puedo encontrar la manera de hacerlo funcionar. cuando trato de usar el componente Pie, aparece el error: Error: "arc" is not a registered element.
Hice una aplicación de reacción muy simple:
Aquí está mi paquete.json:
{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "chart.js": "^3.6.0", "cra-template": "1.1.2", "react": "^17.0.2", "react-chartjs-2": "^4.0.0", "react-dom": "^17.0.2", "react-scripts": "4.0.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }Y aquí está mi archivo App.js:
import React from 'react' import { Pie } from 'react-chartjs-2' const BarChart = () => { return ( <Pie data={{ labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [ { label: '# of votes', data: [12, 19, 3, 5, 2, 3], }, ], }} height={400} width={600} /> ) } const App = () => { return ( <div> <BarChart /> </div> ) } export default AppTambién traté de seguir este toturial: https://www.youtube.com/watch?v=c_9c5zkfQ3Y&ab_channel=WornOffKeys
Utiliza una versión anterior de charJs y react-chartjs-2. Y cuando reemplazo mis versiones de react-chartjs-2 y chartjs, funciona en mi aplicación.
"chart.js": "^2.9.4", "react-chartjs-2": "^2.10.0",¿Alguien sabe cómo resolver el error que tengo (sin tener que mantener las versiones anteriores de chartJs y react-chartjs-2)?
Chart.js se puede sacudir desde chart.js V3, por lo que deberá importar y registrar todos los elementos que esté utilizando.
import {Chart, ArcElement} from 'chart.js' Chart.register(ArcElement);Para todas las importaciones disponibles y formas de registrar los componentes, puede leer la documentación normal de chart.js
Me encontré con el mismo problema anteriormente, encontré la solución en la página de documentación de react-chartjs-2: https://react-chartjs-2.netlify.app/docs/migration-to-v4#tree-shaking
import 'chart.js/auto'; import { Chart } from 'react-chartjs-2'; <Chart type='line' data={chartData} /> Todo lo que tiene que hacer es agregar esta línea import 'chart.js/auto';
En mi caso esto funcionó:
import React from "react"; import { ArcElement } from "chart.js"; import Chart from "chart.js/auto";