# 棒グラフ

棒グラフは、データ値を垂直方向の棒として表示する方法を提供します。これは、トレンドデータの表示や、複数のデータセットの並列比較に使用されることがあります。

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

# データセットのプロパティ

名前空間

data.datasets[index] - このデータセットのみのオプション
options.datasets.bar - すべての棒グラフデータセットのオプション
options.elements.bar - すべての棒グラフ要素のオプション
options - グラフ全体のオプション

棒グラフでは、各データセットに対して多くのプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、棒の色は一般的にこのように設定されます。データセットの名前空間では、dataオプションのみを指定する必要があります。

名前	型	スクリプタブル	インデックス可能	デフォルト
`backgroundColor`	`色`	はい	はい	`'rgba(0, 0, 0, 0.1)'`
`base`	`数値`	はい	はい
`barPercentage`	`数値`	-	-	`0.9`
`barThickness`	`数値`\|`文字列`	-	-
`borderColor`	`色`	はい	はい	`'rgba(0, 0, 0, 0.1)'`
`borderSkipped`	`文字列`\|`ブール値`	はい	はい	`'start'`
`borderWidth`	`数値`\|`オブジェクト`	はい	はい	`0`
`borderRadius`	`数値`\|`オブジェクト`	はい	はい	`0`
`categoryPercentage`	`数値`	-	-	`0.8`
`clip`	`数値`\|`オブジェクト`\|`false`	-	-
`data`	`オブジェクト`\|`オブジェクト配列`\| `数値配列`\|`文字列配列`	-	-	必須
`grouped`	`ブール値`	-	-	`true`
`hoverBackgroundColor`	`色`	はい	はい
`hoverBorderColor`	`色`	はい	はい
`hoverBorderWidth`	`数値`	はい	はい	`1`
`hoverBorderRadius`	`数値`	はい	はい	`0`
`indexAxis`	`文字列`	-	-	`'x'`
`inflateAmount`	`数値`\|`'auto'`	はい	はい	`'auto'`
`maxBarThickness`	`数値`	-	-
`minBarLength`	`数値`	-	-
`label`	`文字列`	-	-	`''`
`order`	`数値`	-	-	`0`
`pointStyle`	`pointStyle`	はい	-	`'circle'`
`skipNull`	`ブール値`	-	-
`stack`	`文字列`	-	-	`'bar'`
`xAxisID`	`文字列`	-	-	最初のx軸
`yAxisID`	`文字列`	-	-	最初のy軸

これらの値はすべて、undefined の場合、オプションの解決で説明されているスコープにフォールバックします。

# データセット設定の例

data: {
    datasets: [{
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        data: [10, 20, 30, 40, 50, 60, 70]
    }]
};

# 一般

名前	説明
`base`	値軸に沿ったデータ単位での棒の基本値。設定されていない場合、値軸の基本値がデフォルトになります。
`clip`	chartArea を基準としたクリッピング方法。正の値はオーバーフローを許容し、負の値は chartArea の内側にそのピクセル数だけクリップします。`0` = chartArea でクリップします。クリッピングは、各辺ごとに設定することもできます: `clip: {left: 5, top: false, right: -2, bottom: 0}`
`grouped`	棒をインデックス軸でグループ化するかどうか。`true` の場合、同じインデックス値にあるすべてのデータセットはそのインデックス値を中心にして互いに隣接して配置されます。`false` の場合、各棒はその実際のインデックス軸の値に配置されます。
`indexAxis`	データセットの基本軸。垂直方向の棒の場合は `'x'`、水平方向の棒の場合は `'y'`。
`label`	凡例とツールチップに表示されるデータセットのラベル。
`order`	データセットの描画順序。スタッキング、ツールチップ、凡例の順序にも影響します。詳細
`skipNull`	`true` の場合、null または undefined の値は、棒のサイズを決定する際のスペース計算には使用されません。
`stack`	このデータセットが属するグループの ID（スタックされている場合、各グループは個別のスタックになります）。詳細
`xAxisID`	このデータセットをプロットする x 軸の ID。
`yAxisID`	このデータセットをプロットする y 軸の ID。

# スタイル

各棒のスタイルは、次のプロパティで制御できます。

名前	説明
`backgroundColor`	棒の背景色。
`borderColor`	棒の枠線の色。
`borderSkipped`	棒を描画する際にスキップする端。
`borderWidth`	棒の枠線の幅（ピクセル単位）。
`borderRadius`	棒の角丸の半径（ピクセル単位）。
`minBarLength`	棒を最小の長さ（ピクセル単位）に設定します。
`pointStyle`	凡例用の点のスタイル。詳細...

これらの値はすべて、undefined の場合、関連付けられた elements.bar.* オプションにフォールバックします。

# borderSkipped

この設定は、塗りつぶしのベースで棒のストロークを描画しないようにするか、角丸を無効にするために使用されます。一般的に、棒グラフを派生するグラフの種類を作成する場合を除いて、これを変更する必要はありません。

注記

垂直方向のグラフの負の棒では、top と bottom が反転します。水平方向のグラフでは、left と right も同様です。

オプションは次のとおりです。

'start'
'end'
'middle'（スタックされた棒でのみ有効：棒間の枠線がスキップされます）
'bottom'
'left'
'top'
'right'
false（枠線をスキップしません）
true（すべての枠線をスキップします）

# borderWidth

この値が数値の場合、borderSkipped を除く長方形のすべての辺（左、上、右、下）に適用されます。この値がオブジェクトの場合、left プロパティは左の枠線の幅を定義します。同様に、right、top、bottom プロパティも指定できます。省略された枠線と borderSkipped はスキップされます。

# borderRadius

この値が数値の場合、borderSkipped に接する角を除く長方形のすべての角（topLeft、topRight、bottomLeft、bottomRight）に適用されます。この値がオブジェクトの場合、topLeft プロパティは左上の角の角丸の半径を定義します。同様に、topRight、bottomLeft、bottomRight プロパティも指定できます。省略された角と borderSkipped に接する角はスキップされます。たとえば、top の枠線がスキップされている場合、角topLeftとtopRightの角丸の半径もスキップされます。

スタックされたグラフ

角丸の半径が数値として提供され、グラフがスタックされている場合、半径はスタックの端にある棒、または棒がフロートしている場合の棒のみに適用されます。この動作をオーバーライドするには、オブジェクト構文を使用できます。

# inflateAmount

このオプションは、棒を描画するために使用される四角形を膨張させるために使用できます。これは、barPercentage * categoryPercentage が 1 の場合に、棒間のアーティファクトを隠すために使用できます。ほとんどの場合、デフォルト値の 'auto' で機能するはずです。

# インタラクション

各棒とのインタラクションは、次のプロパティで制御できます。

名前	説明
`hoverBackgroundColor`	ホバー時の棒の背景色。
`hoverBorderColor`	ホバー時の棒の枠線の色。
`hoverBorderWidth`	ホバー時の棒の枠線の幅（ピクセル単位）。
`hoverBorderRadius`	ホバー時の棒の角丸の半径（ピクセル単位）。

これらの値はすべて、undefined の場合、関連付けられた elements.bar.* オプションにフォールバックします。

# barPercentage

カテゴリ幅内で各棒が占める利用可能な幅のパーセント（0～1）。1.0 はカテゴリ幅全体を占め、棒を互いに隣接して配置します。詳細...

# categoryPercentage

サンプル幅内で各カテゴリが占める利用可能な幅のパーセント（0～1）。詳細...

# barThickness

この値が数値の場合、ピクセル単位で各棒の幅に適用されます。これが適用されると、barPercentage と categoryPercentage は無視されます。

'flex' に設定されている場合、基本サンプルの幅は、前のサンプルと次のサンプルに基づいて自動的に計算され、オーバーラップせずに利用可能な幅全体を占めます。次に、barPercentage と categoryPercentage を使用して棒のサイズが設定されます。パーセンテージオプションが 1 の場合、ギャップはありません。このモードは、データが均等に間隔を空けていない場合に、幅が異なる棒を生成します。

設定されていない場合（デフォルト）、基本サンプルの幅は、棒のオーバーラップを防ぐ最小間隔を使用して計算され、barPercentage と categoryPercentage を使用して棒のサイズが設定されます。このモードは常に、サイズが等しい棒を生成します。

# maxBarThickness

これにより、棒のサイズがこれより厚くならないようにします。

# スケール設定

棒グラフは、関連付けられた scale オプションから次の設定に対して一意のデフォルト値を設定します。

名前	型	デフォルト	説明
`offset`	`ブール値`	`true`	true の場合、両方の端に余分なスペースが追加され、軸はグラフ領域に収まるようにスケールされます。
`grid.offset`	`ブール値`	`true`	true の場合、特定のデータポイントの棒はグリッドラインの間に落ちます。グリッドラインはティック間隔の半分だけ左に移動します。false の場合、グリッドラインは棒の中央をまっすぐ下方に通ります。詳細...

# スケール設定の例

options = {
    scales: {
        x: {
            grid: {
              offset: true
            }
        }
    }
};

# オフセットグリッドライン

真の場合、特定のデータポイントの棒はグリッド線間に収まります。グリッド線は目盛りの間隔（グリッド線間のスペース）の半分だけ左に移動します。偽の場合、グリッド線は棒の中央を垂直に下ります。これは、棒グラフのカテゴリ尺度ではtrueに、他の尺度またはグラフの種類ではデフォルトでfalseに設定されます。

# デフォルトオプション

作成されたすべての棒グラフに設定を適用したいことはよくあります。グローバルな棒グラフ設定は、Chart.overrides.barに格納されます。グローバルオプションを変更しても、変更後のグラフにのみ影響します。既存のグラフは変更されません。

# barPercentage 対 categoryPercentage

以下は、棒パーセンテージオプションとカテゴリパーセンテージオプションの関係を示しています。

// categoryPercentage: 1.0
// barPercentage: 1.0
Bar:        | 1.0 | 1.0 |
Category:   |    1.0    |
Sample:     |===========|
// categoryPercentage: 1.0
// barPercentage: 0.5
Bar:          |.5|  |.5|
Category:  |      1.0     |
Sample:    |==============|
// categoryPercentage: 0.5
// barPercentage: 1.0
Bar:             |1.0||1.0|
Category:        |   .5   |
Sample:     |==================|

# データ構造

サポートされているすべてのデータ構造を棒グラフで使用できます。

# 積み上げ棒グラフ

棒グラフは、X軸とY軸の設定を変更してスタッキングを有効にすることで、積み上げ棒グラフに構成できます。積み上げ棒グラフは、1つのデータ系列がいくつもの小さな部分から構成されている様子を示すために使用できます。

const stackedBar = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            x: {
                stacked: true
            },
            y: {
                stacked: true
            }
        }
    }
});

# 横棒グラフ

横棒グラフは、縦棒グラフのバリエーションです。トレンドデータや、複数のデータセットを並べて比較するために使用されることがあります。これを実現するには、オプションオブジェクトのindexAxisプロパティを'y'に設定する必要があります。このプロパティのデフォルトは'x'であり、縦棒が表示されます。

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
  }
};const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
  }
};

# 横棒グラフの設定オプション

横棒グラフの設定オプションは、棒グラフと同じです。ただし、棒グラフのx軸で指定されたオプションは、横棒グラフのy軸に適用されます。

# 内部データ形式

{x, y, _custom}。ここで、_customは、積み上げ棒のプロパティを定義するオプションのオブジェクトです：{start, end, barStart, barEnd, min, max}。startとendは入力値です。これら2つは、barStart（原点に近い）、barEnd（原点から遠い）、min、maxで繰り返されます。

← 面グラフバブルグラフ →