# デカルト軸

デカルトグリッドに従う軸は、「デカルト軸」と呼ばれます。デカルト軸は、折れ線グラフ、棒グラフ、バブルチャートに使用されます。 Chart.jsには、デフォルトで4つのデカルト軸が含まれています。

# ビジュアルコンポーネント

デカルト軸は、個別に設定できるビジュアルコンポーネントで構成されています。これらのコンポーネントは次のとおりです。

境界線
グリッド線
目盛り
目盛り線
タイトル

# 境界線

軸の境界線は、チャート領域の横にある軸の端に描画されます。下の画像では、赤で描画されています。

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        border: {
          color: 'red'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        border: {
          color: 'red'
        }
      }
    }
  }
};

# グリッド線

軸のグリッド線は、チャート領域に描画されます。下の画像では、赤色です。

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          color: 'red',
          borderColor: 'grey',
          tickColor: 'grey'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          color: 'red',
          borderColor: 'grey',
          tickColor: 'grey'
        }
      }
    }
  }
};

# 目盛りと目盛り線

目盛りは、ラベルとして表示される軸上のデータ値を表します。目盛り線は、軸の境界線からラベルまで伸びるグリッド線の延長です。この例では、目盛り線は赤で描画され、目盛りラベルは青で描画されています。

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          tickColor: 'red'
        },
        ticks: {
          color: 'blue',
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          tickColor: 'red'
        },
        ticks: {
          color: 'blue',
        }
      }
    }
  }
};

# タイトル

軸のタイトルコンポーネントは、データにラベルを付けるために使用されます。以下の例では、赤色で表示されています。

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        title: {
          color: 'red',
          display: true,
          text: 'Month'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        title: {
          color: 'red',
          display: true,
          text: 'Month'
        }
      }
    }
  }
};

# 共通設定

注記

これらは、すべてのデカルト軸でサポートされている共通オプションのみです。その軸で使用可能なすべてのオプションについては、特定の軸のドキュメントを参照してください。

# すべてのデカルト軸に共通のオプション

名前空間：options.scales[scaleId]

名前	種類	デフォルト	説明
`境界`	`文字列`	`'ticks'`	スケールの境界を決定します。詳細...
`クリップ`	`ブーリアン`	`true`	trueの場合、データセットの描画をチャート領域ではなくスケールのサイズに対してクリップします
`位置`	`文字列` \| `オブジェクト`		軸の位置。詳細...
`スタック`	`文字列`		スタックグループ。同じ`position`で同じ`stack`を持つ軸はスタックされます。
`stackWeight`	`数値`	1	スタックグループ内のスケールの重み。グループ内でスケールに割り当てられるスペースの量を決定するために使用されます。
`軸`	`文字列`		これがどのタイプの軸か。可能な値は、`'x'`、`'y'`です。設定されていない場合、これはIDの最初の文字から推測されます。これは`'x'`または`'y'`である必要があります。
`オフセット`	`ブーリアン`	`false`	trueの場合、両端に余分なスペースが追加され、軸はチャート領域に収まるようにスケールされます。これは、棒グラフの場合、デフォルトで`true`に設定されています。
`タイトル`	`オブジェクト`		スケールタイトルの設定。詳細...

# すべての軸に共通のオプション

名前空間：options.scales[scaleId]

名前	種類	デフォルト	説明
`種類`	`文字列`		採用されているスケールの種類。カスタムスケールを作成し、文字列キーで登録できます。これにより、チャートの軸の種類を変更できます。
`alignToPixels`	`ブーリアン`	`false`	ピクセル値をデバイスピクセルに合わせます。
`backgroundColor`	`色`		スケール領域の背景色。
`境界線`	`オブジェクト`		境界線の設定。詳細...
`表示`	`ブーリアン`\|`文字列`	`true`	軸のグローバルな可視性を制御します（`true`の場合は表示、`false`の場合は非表示）。 `display：'auto'`の場合、軸は、少なくとも1つの関連付けられたデータセットが表示されている場合にのみ表示されます。
`グリッド`	`オブジェクト`		グリッド線の設定。詳細...
`最小`	`数値`		ユーザー定義のスケールの最小数。データの最小値をオーバーライドします。詳細...
`最大`	`数値`		ユーザー定義のスケールの最大数。データの最大値をオーバーライドします。詳細...
`反転`	`ブーリアン`	`false`	スケールを反転します。
`積み重ね`	`ブーリアン`\|`文字列`	`false`	データを積み重ねる必要があるかどうか。詳細...
`suggestedMax`	`数値`		最大データ値の計算に使用される調整。詳細...
`suggestedMin`	`数値`		最小データ値の計算に使用される調整。詳細...
`目盛り`	`オブジェクト`		目盛りの設定。詳細...
`重み`	`数値`	`0`	軸のソートに使用される重み。重みが大きいほど、チャート領域から離れます。

# 軸の位置

軸は、チャートの端、チャート領域の中央、またはデータ値に関して動的に配置できます。

軸をチャートの端に配置するには、`position`オプションを`'top'`、`'left'`、`'bottom'`、`'right'`のいずれかに設定します。軸をチャート領域の中央に配置するには、`position`オプションを`'center'`に設定します。このモードでは、`axis`オプションを指定するか、軸IDを文字'x'または'y'で始める必要があります。これは、chart.jsがそれがどのような種類の軸（水平または垂直）であるかを知ることができるようにするためです。軸をデータ値に関して配置するには、`position`オプションを次のようなオブジェクトに設定します。

{
    x: -20
}

これは、IDが "x" の軸の値 -20 に軸を配置します。デカルト軸の場合、1つの軸のみを指定できます。

# スケールの境界

`bounds`プロパティは、スケールの境界戦略を制御します（`min` / `max`オプションによってバイパスされます）。

`'data'`：データが完全に表示されるようにし、外部のラベルは削除されます
`'ticks'`：目盛りが完全に表示されるようにし、外部のデータは切り捨てられます

# 目盛りの設定

注記

これらは、すべてのデカルト軸でサポートされている共通の目盛りオプションのみです。その軸で使用可能なすべてのオプションについては、特定の軸のドキュメントを参照してください。

# すべてのデカルト軸に共通の目盛りオプション

名前空間：`options.scales[scaleId].ticks`

名前	種類	デフォルト	説明
`配置`	`文字列`	`'center'`	軸に沿った目盛りの配置。 `'start'`、`'center'`、`'end'`、または`'inner'`にすることができます。 `inner`の配置は、水平軸の最初の目盛りには`start`を、最後の目盛りには`end`を配置することを意味します
`crossAlign`	`文字列`	`'near'`	軸に垂直な目盛りの配置。`'near'`、`'center'`、または`'far'`にすることができます。目盛りの配置を参照してください
`sampleSize`	`数値`	`ticks.length`	いくつのラベルが収まるかを決定する際に検査する目盛りの数。小さい値を設定すると高速になりますが、ラベルの長さに大きなばらつきがある場合は精度が低下する可能性があります。
`autoSkip`	`ブーリアン`	`true`	trueの場合、表示できるラベルの数を自動的に計算し、それに応じてラベルを非表示にします。ラベルは、いずれかをスキップする前に、`maxRotation`まで回転されます。すべてのラベルを必ず表示するには、`autoSkip`をオフにします。
`autoSkipPadding`	`数値`	`3`	`autoSkip`が有効になっている場合の、水平軸の目盛り間の間隔。
`includeBounds`	`ブーリアン`	`true`	定義された`min`および`max`値が「適切」でない場合でも、目盛りとして表示する必要があるかどうか。
`labelOffset`	`数値`	`0`	ラベルを目盛りの.中心点からオフセットするピクセル単位の距離（x軸の場合はx方向、y軸の場合はy方向）。注：これにより、端のラベルがキャンバスの端で切り取られる可能性があります
`maxRotation`	`数値`	`50`	ラベルを凝縮するために回転するときの目盛りラベルの最大回転。注：回転は必要になるまで発生しません。注：水平スケールにのみ適用されます。
`minRotation`	`数値`	`0`	目盛ラベルの最小回転角度。注記: 横軸にのみ適用されます。
`ミラー`	`ブーリアン`	`false`	軸を中心に目盛ラベルを反転させ、ラベルをチャートの外側ではなく内側に表示します。注記: 縦軸にのみ適用されます。
`パディング`	`数値`	`0`	目盛ラベルと軸の間のパディング。縦軸に設定した場合、これは水平 (X) 方向に適用されます。横軸に設定した場合、これは垂直 (Y) 方向に適用されます。
`最大目盛数制限`	`数値`	`11`	表示する目盛とグリッド線の最大数。

# すべての軸に共通の目盛オプション

名前空間：`options.scales[scaleId].ticks`

名前	種類	スクリプト可能	デフォルト	説明
`背景色`	`色`	はい	`'rgba(255, 255, 255, 0.75)'`	ラベルの背景色。
`背景パディング`	`パディング`		`2`	ラベルの背景のパディング。
`コールバック`	`関数`			チャートに表示される目盛値の文字列表現を返します。コールバックを参照してください。
`表示`	`ブーリアン`		`true`	true の場合、目盛ラベルを表示します。
`色`	`色`	はい	`Chart.defaults.color`	目盛の色。
`フォント`	`フォント`	はい	`Chart.defaults.font`	フォントを参照してください。
`主目盛`	`オブジェクト`		`{}`	主目盛の設定.
`パディング`	`数値`		`3`	軸からの目盛ラベルのオフセットを設定します。
`ラベル背景の表示`	`ブーリアン`	はい	放射状スケールの場合`true`、それ以外の場合は`false`	true の場合、目盛ラベルの背後に背景を描画します。
`テキストのストローク色`	`色`	はい	``	テキストの周りのストロークの色。
`テキストのストローク幅`	`数値`	はい	`0`	テキストの周りのストロークの幅。
`z`	`数値`		`0`	目盛レイヤーの z-index。目盛がチャート領域に描画される場合に便利です。値 <= 0 はデータセットの下に、> 0 は上に描画されます。

# 目盛の配置

目盛の配置は、主に目盛設定オブジェクトの2つの設定、align と crossAlign を使用して制御されます。align 設定は、ラベルが軸方向（つまり、横軸の場合は水平、縦軸の場合は垂直）に沿って目盛とどのように配置されるかを設定します。crossAlign 設定は、ラベルが垂直方向（つまり、横軸の場合は垂直、縦軸の場合は水平）に目盛とどのように配置されるかを設定します。以下の例では、crossAlign 設定を使用して、Y軸のラベルを左揃えにしています。

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far',
        }
      }
    }
  }
};const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far',
        }
      }
    }
  }
};

注記

crossAlign 設定は、以下の前提条件が満たされている場合にのみ有効です。

目盛の回転が 0 であること
軸の位置が 'top'、'left'、'bottom'、または 'right' であること

# 軸 ID

プロパティ dataset.xAxisID または dataset.yAxisID は、scales プロパティと一致する必要があります。これは、複数軸チャートを使用する場合に特に必要です。

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // This dataset appears on the first axis
            yAxisID: 'first-y-axis'
        }, {
            // This dataset appears on the second axis
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            'first-y-axis': {
                type: 'linear'
            },
            'second-y-axis': {
                type: 'linear'
            }
        }
    }
});

# 複数軸の作成

デカルト軸では、複数の X 軸と Y 軸を作成できます。そのためには、xAxes プロパティと yAxes プロパティに複数の設定オブジェクトを追加します。新しい軸を追加する場合、デフォルトの型はこのケースでは使用されないため、新しい軸の型を指定することが重要です。

以下の例では、2つの Y 軸を作成しています。そして、yAxisID プロパティを使用して、データセットを正しい軸にマッピングしています。

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',
            // This binds the dataset to the left y axis
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',
            // This binds the dataset to the right y axis
            yAxisID: 'right-y-axis'
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            'left-y-axis': {
                type: 'linear',
                position: 'left'
            },
            'right-y-axis': {
                type: 'linear',
                position: 'right'
            }
        }
    }
});

← 軸カテゴリ軸 →