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.

Valores negativos en el eje y cuando todos los puntos tienen un valor de 0.

13 Jul, 2023 Programación

Tengo un gráfico donde los valores pueden ser 0 o 1, y en ChartJs 2 o inferior funciona perfectamente, pero migré a la versión 3.6 y ahora aparece un -1, a pesar de que establezco BeginAtZero en true, min en 0 y max en 1.
Necesito que el 0 esté al principio del eje y (como en la versión 2), no en el medio (como en la versión 3.6).
este es mi código

var ctx = document.getElementById("test");
var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ["ab", "cd", "ef", "gh", "ij"],
      datasets: [{ data: [0, 0, 0, 0, 0] }]
   },
   options: // SEE BELOW
});

estas son las opciones para la versión anterior (funciona correctamente)

scales: {
   yAxes: [{
       ticks: {
           beginAtZero: true,
           max: 1,
           min: 0
       }
   }]
}

y este es el código para la versión 3.6 (el eje y está incorrecto)

scales: {
   y: {
      ticks: {
         beginAtZero: true,
         max: 1,
         min: 0
      }
  }
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el 0 aparezca al principio del eje y en Chart.js versión 3.6, debes añadir la opción ‘position: “bottom”‘ al objeto de ticks en la configuración del eje y. Esto moverá las marcas (ticks) hacia la parte inferior del gráfico, con el valor de 0 en la parte inferior del eje vertical.

    Aquí tienes el código actualizado para la versión 3.6:

    var ctx = document.getElementById("test");
var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ["ab", "cd", "ef", "gh", "ij"],
      datasets: [{ data: [0, 0, 0, 0, 0] }]
   },
   options: {
      scales: {
         y: {
            ticks: {
               beginAtZero: true,
               max: 1,
               min: 0,
               position: "bottom"
            }
         }
      }
   }
});

    Con esta configuración, las marcas (ticks) del eje y se mostrarán en la parte inferior del gráfico, con el valor de 0 en la parte inferior del eje vertical, como en la versión 2.

Comments are closed.