0

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.

1 respuesta 1

0

Buscando en la documentación encontré algunos ejemplos para configurar las opciones, podrías usar algo como esto:

options = {{
          plugins: {
              legend: {
                  display: false,
                
              },
              
          },
          responsive: true,
          scales: {
            x: {            
              display: false
            }
          }
      }}

En cuanto a responsive hay consideraciones adicionales te recomiendo que revises.

Y también dejan un codepen de ejemplo para el caso de responsive.

Espero te ayude la respuesta, saludos!

1
  • Me ha funcionado perfectamente, muchísimas gracias! Commented el 1 jun. 2021 a las 11:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.