linear axis: "reverse" breaks tick align 'inner'

Abierto Apto para principiantes
  • ¿Algo no está bien?
#12,378 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@Fardin7798 ya está trabajando en esto.

Desde el 6/11/2026.

  • #12379 de @Fardin7798 — abierto
  • #12385 de @chiragbitoni — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
77/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
chart.js, javascript
Área
data-visualization, frontend

Línea de trabajo

Empieza en scale.js, en computeLabelItem, e inspecciona cómo la alineación de ticks inner calcula las posiciones de las etiquetas del primer y el último tick. Compara el comportamiento actual con el de un eje lineal invertido usando la configuración proporcionada. Actualiza la alineación para que esos ticks permanezcan dentro del eje y ejecuta las pruebas pertinentes de escala y alineación de ticks; el trabajo estará terminado cuando el eje invertido represente ambos ticks de los extremos hacia dentro.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

type: bug
Expected behavior

When the axis is drawn and "align": "inner" is set for ticks, the first and last tick shall be painted inwards the axis line.

Current behavior

When the axis is drawn in standard direction, "align": "inner" works for ticks

Image

But when "reverse": "true", the first and last tick are explicitly rendred out of the axis!

Image
Reproducible sample

don't have one. Use the codepen and replace the cfg with the one below

Optional extra steps/info to reproduce

Cfg for the codepen. Clearly shows the problem

var myChart = new Chart(ctx, {
  type: "line",
  data: {
    //labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        indexAxis: "x",
        data: [
          { x: 200, y: 12 },
          { x: 451, y: 14 },
          { x: 999, y: 14 }
        ]
      }
    ]
  },
  options: {
    scales: {
      x: {
        axis: "x",
        type: "linear",
        min: 200,
        max: 1000,
        reverse: true,
        ticks: {
          align: "inner"
        }
      },
      y: {
        axis: "y",
        min: 0,
        max: 20
      }
    }
  }
});
Possible solution

scale.js computeLabelItem

Consider reversed axis setting here

case 'inner':
          if (i === ilen - 1) {
            left -= width;
          } else if (i > 0) {
            left -= width / 2;
          }
break;
Context

No response

chart.js version

v4.5.1

Browser name and version

Chrome 152

Link to your project

No response

Lenguaje dominante
JavaScript
Estrellas
67.8k
Forks
12k
Merge medio
6 h 15 min
PR fusionados (30 d)
3

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de chartjs/Chart.js

Todos los issues de chartjs/Chart.js

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.