Cuando creo un gráfico de líneas con chart.js, todo funciona bien, pero cuando intento crear un gráfico de barras, muestra un fondo blanco. Por favor ayuda. Este es mi código de trabajo (Line Chart.js)
import React from 'react'; import { useEffect, useState } from "react"; import { Line, Bar } from 'react-chartjs-2'; export function BarChart() { const [chartData, chartDataSet] = useState(null); useEffect( () => { const data = { labels: ['n1', 'n2', 'n3', 'n4', 'n5', 'n6', 'n7'], datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }; chartDataSet(data); }, []); if (!chartData) { return null; } return <Line data={chartData}/>; }Este código no funciona y no genera nada (bar chart.js):
import React from 'react'; import { useEffect, useState } from "react"; import { Line, Bar } from 'react-chartjs-2'; export function BarChart() { const [chartData, chartDataSet] = useState(null); useEffect( () => { const data = { labels: ['n1', 'n2', 'n3', 'n4', 'n5', 'n6', 'n7'], datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }; chartDataSet(data); }, []); if (!chartData) { return null; } return <Bar data={chartData}/>; }Ejecuto todo en un nuevo archivo en este lugar:
export function Mytest() { return ( <div className="App"> <BarChart/> </div> ); }Problema resuelto. Tuviste que agregar algunas importaciones adicionales y agregarlas al registro.
Código de trabajo (bar chart.js):
import React from 'react'; import {Bar} from 'react-chartjs-2'; import { Chart as ChartJS, CategoryScale, Title, Tooltip, Legend, BarElement, BarController } from 'chart.js' import { Chart } from 'react-chartjs-2' ChartJS.register( CategoryScale, Title, Tooltip, Legend, BarElement, BarController ) const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: 'rgba(255,99,132,0.2)', borderColor: 'rgba(255,99,132,1)', borderWidth: 1, hoverBackgroundColor: 'rgba(255,99,132,0.4)', hoverBorderColor: 'rgba(255,99,132,1)', data: [65, 59, 80, 81, 56, 55, 40] } ] }; export function BarChart() { return ( <div> <h2>Bar Example (custom size)</h2> <Bar data={data} width={100} height={50} options={{ maintainAspectRatio: true }} /> </div> ); }