Styling

更新日: 2019-12-06

軸のスタイルには多くのオプションがあります。グリッドラインや、目盛線を制御する設定もあります。

グリッドライン設定

グリッドラインの設定は、スケール設定のgridLinesオプションのサブオプションです。軸に対して垂直に走るグリッドラインのオプションを定義します。

名称	type	初期値	説明
`display`	`boolean`	`true`	`false`の場合、この軸ではグリッドラインを表示しません。
`circular`	`boolean`	`false`	`true`の場合、グリッドラインが円形になります。 (レーダーチャートのみで有効です。)
`color`	`color\|color[]`	`rgba(0, 0, 0, 0.1)`	グリッドラインの色。配列を指定した場合、最初の色が1本目のグリッドラインの色になり、 2つめの色が2本目の色になり、以降同様です。
`borderDash`	`number[]`	`[]`	線の長さとスペース間隔(ダッシュ構成)。 (MDNを参照してください。)
`borderDashOffset`	`number`	`0`	ダッシュのオフセット。 (MDNを参照してください。)
`lineWidth`	`number\|number[]`	`1`	グリッドラインの太さ。
`drawBorder`	`boolean`	`true`	`true`の場合、軸とチャート領域の間に境界線を表示します。
`drawOnChartArea`	`boolean`	`true`	`ture`の場合、軸線内のチャート領域にラインを表示します。複数軸で描画するグリッドラインの制御が必要な場合に便利です。
`drawTicks`	`boolean`	`true`	`true`の場合、チャート横の軸線の横に目盛線を表示します。
`tickMarkLength`	`number`	`10`	軸領域に表示する目盛線の長さ(px)。
`zeroLineWidth`	`number`	`1`	最初のインデックス(index 0)のグリッドラインのストローク幅。
`zeroLineColor`	`color`	`rgba(0, 0, 0, 0.25)`	最初のインデックス(index 0)のグリッドラインの色。
`zeroLineBorderDash`	`number[]`	`[]`	最初のインデックス(index 0)のグリッドラインの長さとスペース間隔(ダッシュ構成)。 (MDNを参照してください。)
`zeroLineBorderDashOffset`	`number`	`0`	最初のインデックス(index 0)のグリッドラインのダッシュのオフセット。 (MDNを参照してください。)
`offsetGridLines`	`boolean`	`false`	`true`の場合、グリッドラインを目盛ラベルの間に表示します。棒グラフの場合、デフォルトは`true`です。
`z`	`number`	`0`	グリッドラインの`z-index`。 0以下の場合はデータセットの下に描画され、0より大きい場合は上に描画されます。

目盛線設定

目盛線の設定は、スケール設定のticksオプションのサブオプションです。軸から生成される目盛線のオプションを定義します。

名称	type	初期値	説明
`callback`	`function`		チャートに表示されるべき目盛の文字列を返します。コールバックを参照して下さい。
`display`	`boolean`	`true`	`true`の場合、目盛線を表示します。
`fontColor`	`color`	`#666`	目盛ラベルの文字色。
`fontFamily`	`string`	`"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"`	目盛ラベルのフォント。
`fontSize`	`number`	`12`	目盛ラベルのフォントサイズ。
`fontStyle`	`string`	`normal`	目盛ラベルのスタイル。(normal、italic、oblique、initial、inherit)
`lineHeight`	`number`, `string`	`1.2`	個々のテキスト行の高さ。 (MDNを参照してください。)
`reverse`	`boolean`	`false`	目盛ラベルの順序を逆順にします。
`minor`	`object`	`{}`	マイナー目盛設定。必須オプションは、上記のオプションを引き継ぎます。
`major`	`object`	`{}`	メジャー目盛設定。必須オプションは、上記のオプションを引き継ぎます。
`padding`	`number`	`0`	軸からのメモリラベルのオフセット。
`z`	`number`	`0`	グリッドラインの`z-index`。 0以下の場合はデータセットの下に描画され、0より大きい場合は上に描画されます。

マイナー目盛設定

マイナー目盛線の設定は、目盛線設定のminorオプションのサブオプションです。軸から生成されるサブ目盛(補助線)のオプションを定義します。省略されたオプションはticks設定から継承されます。

名称	type	初期値	説明
`callback`	`function`		チャートに表示されるべき目盛の文字列を返します。コールバックを参照して下さい。
`fontColor`	`color`	`#666`	目盛ラベルの文字色。
`fontFamily`	`string`	`"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"`	目盛ラベルのフォント。
`fontSize`	`number`	`12`	目盛ラベルの文字サイズ。
`fontStyle`	`string`	`normal`	目盛ラベルのフォントスタイル。(normal、italic、oblique、initial、inherit)
`lineHeight`	`number`, `string`	`1.2`	個々のテキスト行の高さ。 (MDNを参照してください。)

メジャー目盛設定

メジャー目盛線の設定は、目盛線設定のmajorオプションのサブオプションです。軸から生成される目盛線(主線)のオプションを定義します。省略されたオプションはticks設定から継承されます。

名称	type	初期値	説明
`enabled`	`boolean`	`false`	`true`の場合、メジャー目盛設定は主線を表示するために使用します。
`callback`	`function`		チャートに表示されるべき目盛の文字列を返します。コールバックを参照して下さい。
`fontColor`	`color`	`#666`	目盛ラベルの文字色。
`fontFamily`	`string`	`"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"`	目盛ラベルのフォント。
`fontSize`	`number`	`12`	目盛ラベルのフォントサイズ。
`fontStyle`	`string`	`normal`	目盛ラベルのスタイル。(normal、italic、oblique、initial、inherit)
`lineHeight`	`number`, `string`	`1.2`	個々のテキスト行の高さ。 (MDNを参照してください。)

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。