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

オープン 初心者向け
  • 何か問題がありますか？
#12,378 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@Fardin7798 がすでに取り組んでいます。

2026年11月6日 から。

  • #12379 @Fardin7798 による — オープン
  • #12385 @chiragbitoni による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
77/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
chart.js, javascript
領域
data-visualization, frontend

調査の方向性

scale.js の computeLabelItem から始め、inner の目盛り揃えが最初と最後の目盛りのラベル位置をどのように計算するかを調べてください。提供された設定を使い、既存の動作と反転した線形軸での動作を比較してください。これらの目盛りが軸の内側に収まるように揃え方を更新し、関連するスケールと目盛り揃えのテストを実行してください。反転した軸で両端の目盛りが内向きに描画されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
JavaScript
スター
67.8k
フォーク
12k
平均マージ
6時間 15分
マージ済み PR（30日）
3

環境構築

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

chartjs/Chart.js のほかの issue

chartjs/Chart.js の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。