es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

zeroLineColor y zeroLineWidth no están funcionando para el eje x en Chartjs.

05 Aug, 2023 Programación

¿Cómo cambiar el ancho y el color del eje x (eje horizontal) en Chartjs? Parece funcionar utilizando zeroLineColor y zeroLineWidth para el eje y (vertical), pero no funciona para el eje x.

Si agregamos:

ticks: {
  beginAtZero: true
}

Funciona como se espera, pero no quiero que las marcas verticales comiencen desde 0.

¿Hay alguna manera de lograr esto?

scales: {
  xAxes: [{
    gridLines: {
      zeroLineColor: 'black', // FUNCIONA
      zeroLineWidth: 2 // FUNCIONA
    },
    display: true
  }],
  yAxes: [{
    gridLines: {
      zeroLineColor: 'black', // NO FUNCIONA
      zeroLineWidth: 2, // NO FUNCIONA
    },
    id: 'y-axis-0',
    display: true,
    ticks: {
      // beginAtZero: true // Esto es lo que no quiero usar
    }
  }]
}

Este es el resultado que obtengo con el código anterior:
Gráfico

Como puedes ver, el eje x se muestra sin cambios en el color o el ancho.

Estoy usando la versión 2.9.4 de la biblioteca Chartjs.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar el color y el ancho del eje x en Chartjs, debes agregar las mismas propiedades al objeto gridLines dentro del arreglo xAxes, tal como lo hiciste para el eje y. Aquí tienes un ejemplo de código:

    scales: {
  xAxes: [{
    gridLines: {
      zeroLineColor: 'black',
      zeroLineWidth: 2,
      color: 'red', // AGREGA ESTA LÍNEA PARA CAMBIAR EL COLOR
      lineWidth: 2 // AGREGA ESTA LÍNEA PARA CAMBIAR EL ANCHO
    },
    display: true
  }],
  yAxes: [{
    gridLines: {
      zeroLineColor: 'black',
      zeroLineWidth: 2,
    },
    id: 'y-axis-0',
    display: true,
    ticks: {
      beginAtZero: true
    }
  }]
}

    Al agregar las propiedades color y lineWidth al objeto gridLines dentro del arreglo xAxes, podrás cambiar el color y el ancho del eje x. Asegúrate de ajustar los valores según tus necesidades específicas.

Comments are closed.