0

Tengo un grafico creado en React con la libreria de ChartJS y no se como cambiar el color de las linaes del fondo y los datos de la izquierda(adjunto imagen)

introducir la descripción de la imagen aquí

Adjunto el codigo del componente:

import { Line } from 'react-chartjs-2';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
    Filler,
} from 'chart.js';

var beneficios = [3, 5, 7, 4, 8, 9, 5, 3, 7, 5];
let contador=0;

import React, { Component } from 'react'

const HumedadComponent = (props) => {
    ChartJS.register(
      CategoryScale,
      LinearScale,
      PointElement,
      LineElement,
      Title,
      Tooltip,
      Legend,
      Filler
  );

  var meses = ["Humedad(%)", "", "", "", "", "", "", "", "", "",];

  var midata = {
      labels: meses,
      datasets: [ // Cada una de las líneas del gráfico
          {
              label: 'Humedad',
              data: beneficios,
              tension: 0.5,
              fill : true,
              borderColor: 'rgb(255, 255, 255)',
              backgroundColor: 'rgba(220, 221, 225, 0.5)',
              pointRadius: 5,
              pointBorderColor: 'rgba(220, 221, 225)',
              pointBackgroundColor: 'rgba(19, 15, 64)',
          }
      ]
  };

  var misoptions = {
      scales : {
          y : {
              min : 0
          },
          x: {
            ticks: { color: 'rgba(220, 221, 225)'}
          }
      }
  };

  return (
    <Line data={midata} options={misoptions}/>
    );
};

export default HumedadComponent

No se que tengo que cambiar para cambiar las lineas del fondo, los datos de la izquierda y el titulo de arriba a blanco. En el objeto miData esta toda la configuracion del grafico pero no se que tengo que agregar para cambiar ese parametro en especifico. Ya me lei toda la documentacion y no encuentro nada!

1 respuesta 1

0

Para cambiar el color de las líneas de fondo, los datos de la izquierda y el título de arriba a blanco en el gráfico, puedes agregar algunas opciones al objeto misoptions.

Para cambiar el color del título, puedes agregar la opción color a la propiedad title. Por ejemplo:

var misoptions = {
      scales : {
          y : {
              min : 0,
              ticks: {
                  color: 'white'
              }
          },
          x: {
            ticks: {
                color: 'white'
            }
          }
      },
      plugins: {
          title: {
              color: 'white'
          }
      }
  };

Para cambiar el color de las líneas de fondo, puedes agregar la opción color a la propiedad grid. Por ejemplo:

var misoptions = {
      scales : {
          y : {
              min : 0,
              ticks: {
                  color: 'white'
              }
          },
          x: {
            ticks: {
                color: 'white'
            }
          }
      },
      plugins: {
          title: {
              color: 'white'
          }
      },
      elements: {
          line: {
              backgroundColor: 'rgba(220, 221, 225, 0.5)',
              borderColor: 'rgb(255, 255, 255)'
          }
      },
      layout: {
          padding: {
              top: 50,
              bottom: 50
          }
      },
      grid: {
          color: 'white'
      }
  };

Con estas opciones agregadas, deberías poder cambiar el color de las líneas de fondo, los datos de la izquierda y el título de arriba a blanco. Además, también puedes ajustar la opción de layout para agregar un padding superior e inferior para que el título y los datos no se superpongan.

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.