Chart.js 3.9.1

1. 複数の要素を並べた棒グラフ

2. 積み上げ棒グラフ

3. 積み上げ棒グラフを横にする

4. 複合チャート

y軸と x軸が等しい複数の棒グラフを合成したものといえる。同一の要素はグループ化して横に並べ、x軸のラベルごとに表示する。本例では、２種類の売り上げ額を、各月毎にまとめて表示している。

方法は、datasetsプロパティに、labelプロパティと dataプロパティ組み合わせたオブジェクトを複数指定する。この例では、「売り上げA」と「売り上げB」の２種類グラフ要素を組み込んでいる。必要なことは、dataプロパティの配列に格納する要素（金額）と labelsプロパティの要素（月）を対応させることである。

棒グラフの間隔については categoryPercentageプロパティがポイントになる。複数の要素（青棒と赤棒）をグループ化したとしたものをカテゴリと呼ぶcategoryPercentageプロパティは、category同士の間隔を指定する。値は 0〜1の範囲で指定し、1は category間の隙間がない、0に近づくごとに間隔が広くなる。お、要素間の間隔の指定はシンプルな棒グラフで説明した barPercentageプロパティにより指定する。

例題では、それぞれの要素（売り上げAと売り上げB）のプロパティは同じ値にしているが、これが必須のようだ。異なる値を指定すると予想外の動きとなってしまう。

複数の要素を持つ棒グラフの各要素を縦に積み上げる。本例では月毎の売り上げA、Bを積み上げることになる。

options.scalesプロパティの X軸、Y軸それぞれに stackeプロパティを追加する。Y軸の maxプロパティは合計した値が表示できるように増やしている。

上記、項番3で作成した積み上げ棒グラフを横にする。

optionsに indexAxisプロパティを追加し値を 'y'とする。これによりグラフは右に 90度傾く。これだけだと X軸とY軸のラベルが値と合わないので、scalesプロパティの xと yを入れ替える。

Y軸の異なる二つのグラフを同じ平面上に表示したものを複合チャートという。複数の要素を持つグラフの一形態といえる。本例は、項番2で説明した積み上げた棒グラフに、「株価」という要素を追加し、折れ線グラフで表したものである。

データの定義方法は積み上げグラフと同じ。ただし「売り上げ金額」と「株価」は、金額の単位が異なるので、y軸目盛りを２種類定義し、それらを左右に表示する必要がある。

datasetsプロパティに株価データを追加する。グラフの種類は折れ線グラフとする。yAxisIDプロパティに optionsの scalesプロパティに追加する y軸定義名を指定する。

optionsの scalesに２つの y軸を定義し異なる名前をつける。データと y軸定義は yAxisIDプロパティで指定された名前で結び付けられる。なお、yAxisIDプロパティを指定しないと自動的に 'y' という名前の定義が使われる。

株価の y軸ラベルの金額は addComma関数によりカンマ編集している。

数値にカンマを追加する JavaScriptの関数