# スタイリング
軸のスタイリングには、いくつかのオプションがあります。 グリッドライン と 目盛り を制御するための設定があります。
# グリッドラインの設定
名前空間: options.scales[scaleId].grid は、軸に垂直に走るグリッドラインのオプションを定義します。
| 名前 | タイプ | スクリプト化可能 | インデックス化可能 | デフォルト | 説明 |
|---|---|---|---|---|---|
circular | boolean | false | true の場合、グリッドラインは円形になります（レーダーチャートと極座標領域チャートのみ）。 | ||
color | 色 | はい | はい | Chart.defaults.borderColor | グリッドラインの色です。配列として指定した場合、最初の色は最初のグリッドラインに、2 番目の色は 2 番目のグリッドラインに適用されます。 |
display | boolean | true | false の場合、この軸のグリッドラインは表示されません。 | ||
drawOnChartArea | boolean | true | true の場合、軸線の内側のチャート領域に線を描画します。これは、複数の軸があり、どのグリッドラインを描画するかを制御する必要がある場合に便利です。 | ||
drawTicks | boolean | true | true の場合、チャートの横にある軸領域の目盛りの横に線を描画します。 | ||
lineWidth | 数値 | はい | はい | 1 | グリッドラインのストローク幅。 |
offset | boolean | false | true の場合、グリッドラインはラベルの間にシフトされます。これは、棒グラフの場合、デフォルトで true に設定されています。 | ||
tickBorderDash | number[] | はい | はい | [] | 目盛り線の長さ間隔です。設定されていない場合、デフォルトでグリッドラインの `borderDash` 値になります。 |
tickBorderDashOffset | 数値 | はい | はい | 目盛り線の破線のオフセットです。設定されていない場合、デフォルトでグリッドラインの `borderDashOffset` 値になります。 | |
tickColor | 色 | はい | はい | 目盛り線の色です。設定されていない場合、デフォルトでグリッドラインの色になります。 | |
tickLength | 数値 | 8 | グリッドラインが軸領域に描画されるピクセル単位の長さです。 | ||
tickWidth | 数値 | はい | はい | 目盛り線の幅（ピクセル単位）です。設定されていない場合、デフォルトでグリッドラインの幅になります。 | |
z | 数値 | -1 | グリッドラインレイヤーの z-index です。値 <= 0 はデータセットの下に描画され、> 0 は上に描画されます。 |
スクリプト化可能なコンテキストについては、オプション セクションで説明されています。
# 目盛りの設定
# すべての軸に共通の目盛りオプション
名前空間: options.scales[scaleId].ticks
| 名前 | タイプ | スクリプト化可能 | デフォルト | 説明 |
|---|---|---|---|---|
backdropColor | 色 | はい | 'rgba(255, 255, 255, 0.75)' | ラベルの背景色です。 |
backdropPadding | パディング | 2 | ラベルの背景のパディングです。 | |
callback | 関数 | チャートに表示される目盛り値の文字列表現を返します。 コールバック を参照してください。 | ||
display | boolean | true | true の場合、目盛りラベルを表示します。 | |
color | 色 | はい | Chart.defaults.color | 目盛りの色です。 |
font | フォント | はい | Chart.defaults.font | フォント を参照してください。 |
major | オブジェクト | {} | 主目盛りの設定. | |
padding | 数値 | 3 | 軸からの目盛りラベルのオフセットを設定します。 | |
showLabelBackdrop | boolean | はい | 放射状スケールの場合 true、それ以外の場合は false です。 | true の場合、目盛りラベルの背後に背景を描画します。 |
textStrokeColor | 色 | はい | `` | テキストの周りのストロークの色です。 |
textStrokeWidth | 数値 | はい | 0 | テキストの周りのストローク幅です。 |
z | 数値 | 0 | 目盛りレイヤーの z-index です。目盛りがチャート領域に描画される場合に便利です。値 <= 0 はデータセットの下に描画され、> 0 は上に描画されます。 |
スクリプト化可能なコンテキストについては、オプション セクションで説明されています。
# 主目盛りの設定
名前空間： `options.scales[scaleId].ticks.major` は、軸によって生成される主目盛りのオプションを定義します。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
enabled | boolean | false | true の場合、主目盛りが生成されます。主目盛りは自動スキップに影響を与え、スクリプト化可能なオプションコンテキストの目盛りで `major` が定義されます。 |
# 境界線の設定
名前空間: `options.scales[scaleId].border` は、軸に垂直に走る境界線のオプションを定義します。
| 名前 | タイプ | スクリプト化可能 | インデックス化可能 | デフォルト | 説明 |
|---|---|---|---|---|---|
display | boolean | true | true の場合、軸とチャート領域の境界線に境界線を描画します。 | ||
color | 色 | Chart.defaults.borderColor | 境界線の色です。 | ||
width | 数値 | 1 | 境界線の幅です。 | ||
dash | number[] | はい | [] | グリッドラインの破線長さ間隔です。MDN (新しいウィンドウで開きます) を参照してください。 | |
dashOffset | 数値 | はい | 0.0 | 破線のオフセットです。MDN (新しいウィンドウで開きます) を参照してください。 | |
z | 数値 | 0 | 境界線レイヤーの z-index です。値 <= 0 はデータセットの下に描画され、> 0 は上に描画されます。 |