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

Aperta Adatta ai principianti
  • Qualcosa non va?
#12,378 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@Fardin7798 ci sta già lavorando.

Dal 6/11/2026.

  • #12379 di @Fardin7798 — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
77/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
chart.js, javascript
Ambito
data-visualization, frontend

Direzione di ricerca

Inizia in scale.js, in computeLabelItem, e verifica come l’allineamento delle tacche inner calcola le posizioni delle etichette per la prima e l’ultima tacca. Confronta il comportamento attuale con quello di un asse lineare invertito usando la configurazione fornita. Aggiorna l’allineamento affinché queste tacche restino all’interno dell’asse, quindi esegui i test pertinenti per la scala e l’allineamento delle tacche; il lavoro è completato quando l’asse invertito visualizza verso l’interno entrambe le tacche alle estremità.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
JavaScript
Stelle
67.8k
Fork
12k
Merge medio
6h 15m
PR unite (30g)
3

Preparare l'ambiente

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di chartjs/Chart.js

Tutte le issue di chartjs/Chart.js

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.