a ver si hay alguien que me pueda ayudar. Estoy haciendo un proyecto en react para mi empresa y me han pedido que introduzca gráficas, estoy utilizando react-chartjs-2 y tengo un problema con el parámetro option que introduzco, en resumen es, que no reconoce nada de lo que le paso en las opciones. Dejo mi componente por aquí.
import React from 'react';
import { Line } from 'react-chartjs-2';
export const LineChart = () => {
return <div>
<Line
height={400}
width={600}
data={{
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [{
label: "Active Users",
borderColor: "#f96332",
fill: false,
backgroundColor: ['red'],
data: [542, 480, 430, 550, 530, 453, 380, 434, 568, 610, 700, 630]
}]
}}
options={{
maintainAspectRatio: false,
legend: {
display: false
},
responsive: 1,
scales: {
xAxes: [{
display: false
}]
}
}}
/>
</div>
}
Todo lo que se pasa por data, funciona correctamente, pero lo que pasa por options, solo me funciona maintainAspectRatio: false
.
He instalado npm install --save react-chartjs-2 chart.js
y las versiones que se han instalado son las siguientes.
este es el package.json
{
"name": "prduction_container",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"bootstrap": "^4.6.0",
"chart.js": "^3.3.2",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0",
"react-chartjs-2": "^3.0.3",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-search-field": "^1.2.1",
"reactstrap": "^8.9.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Espero que podáis ayudarme, gracias.