JavaScriptで円グラフや棒グラフなどを簡単に表示できるライブラリ「Chart.js」
ちょっと仕事で使用する機会があったので、お勉強がてら記事にします。
第２回。積み上げ棒グラフに折れ線グラフを重ねた複合グラフを作成します。

使用するデータ

「【Chart.jsを使いこなす】棒グラフをExcel風の配色で表示する」のデータを使用しつつ、折れ線グラフを追加します。

Excelで表示した複合グラフ

尚、使用したChart.jsのバージョンは「2.7.1」です。
※Chart.jsの詳細は公式HPをご覧ください。

尚、各データのカラーもExcel風の配色を引き継ぎます。

合計：RGB(158,72,14);　//←New!!
バナナ：RGB(91,155,213);
りんご：RGB(237,125,49);
梨　　；RGB(165,165,165);
みかん：RGB(255,192,0);
いちご：RGB(68,114,196);
柿　　：RGB(112,173,71);
ぶどう：RGB(37,94,145);

ソースコード

Chart.jsでグラフ表示する為のソースコードは以下になります。
前回のソースコードからの差分のみです。

datasets: [
  {
    type: 'line',			//折れ線グラフを適用
    label: "合計",
    lineTension: 0,			//直線
    borderColor: "rgba(158,72,14,1)",
    borderWidth: "3",			//線の太さ 
    backgroundColor: "rgba(158,72,14,1)", //背景透明
    fill: false,			//エリア塗りつぶし設定
    data: [27, 34, 28, 43, 48],		//棒グラフの合計値

    // 点の設定
    pointStyle: "rect",			//circle, rect, triangle, star etc... 
    pointBorderColor: "rgba(158,72,14,1)",
    pointBackgroundColor: "rgba(158,72,14,1)",
    pointRadius: 10,
    pointHoverRadius: 10,
    pointHoverBackgroundColor: "rgba(236,124,48,1)",
    pointHoverBorderColor: "rgba(236,124,48,1)",
  }, {
    // 積み上げ棒グラフの各データ
  }

datasets先頭部分に折れ線グラフのデータを追加するだけです。
※前回のソースコードはscalesのコメントアウトをはずして積み上げ棒グラフに設定してご使用ください。

表示結果

Chart.jsの表示結果
複合グラフはベースのグラフに対して、個別のグラフを入れ子にしてあげる感じですね！
legendラベルの「合計」が先頭に来てしまいますが、折れ線グラフを前面に重ねるためにはデータを１番目に定義する必要がある為、ここはご勘弁ください。
折れ線のポイントスタイルは自由に設定できますので、いろいろ試してみてください。

最後にひとこと

今回は複合グラフを作成してみました。
次回はtooltips関連もイジっていきたいと思いますので、お楽しみに！