エリアチャート(Area)

折れ線グラフとレーダーチャートにはfillオプションがサポートされており、 2つのデータセット間の領域や、データセットと境界線との領域を作成するために使用できます。 (fillモードを参照)

注意：この機能はfillterプラグインで実装されています。

fillモード

^*1 v2.6.0で塗りつぶしモードが実装されました。

^*2 v2.6.0以前では、境界値はzero、top、bottomでした。(非推奨)

^*3 下位互換のためにfill: true(デフォルト)はfill: 'origin'と同等です。

例

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},      // 0: fillを'origin'にします。
            {fill: '+2'},          // 1: fillをデータセット3の値にします。(最終的に塗りつぶしません。)
            {fill: 1},             // 2: fillをデータセット1の値にします。(最終的に塗りつぶしません。)
            {fill: false},         // 3: 塗りつぶしません。
            {fill: '-2'}           // 4: fillをデータセット2の値にします。(最終的に塗りつぶしません。)
        ]
    }
})

設定

propagate

boolean (初期値:true)

trueの場合、塗りつぶし効果を、可視データセットまで再帰的に拡張します^*1。

*1 少し分かりづらいですが、下記のデモを見比べてみてください。
データセットの表示/非表示の切替は、凡例をクリックすると切り替えることができます。

例

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},   // 0: fillを'origin'にします。
            {fill: '-1'},       // 1: fillをデータセット0の値にします。
            {fill: 1},          // 2: fillをデータセット1の値にします。(最終的に'origin'になります。)
            {fill: false},      // 3: 塗りつぶしません。
            {fill: '-2'}        // 4: fillをデータセット2の値にします。(最終的に'origin'になります。)
        ]
    },
    options: {
        plugins: {
            filler: {
                propagate: true
            }
        }
    }
})

propagate: true

• 2(黄)が非表示の場合、4(緑)は1(赤)のfillを使用します。

  1(赤)のfillは-1なので、0(青)のoriginになります。

• 2(黄)と1(赤)が非表示の場合、4(緑)はoriginになります。

  4(緑)のfillは-2ですが、2(黄)と1(赤)が非表示なので、 2要素分詰められることになり0(青)のoriginが適用されます。

propagate: false

• 2(黄)か4(緑)、または両方が非表示の場合、4(緑)は塗りつぶしません。

2(黄)は1(赤)のfillを参照し、1(赤)は0(青)のfillを参照するのでoriginになります。
2(黄)を非表示にすると、fillが伝播されないので4(緑)はfillを参照できなくなり、塗りつぶしが無効化されます。

JavaScript

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets:[{
    type: 'line',
    label: "0",
    data: [10, 11, 12, 13, 14, 15, 16],
    backgroundColor: "rgba(54, 162, 235, 0.2)",
    borderColor: "rgb(54, 162, 235)",
    borderWidth: 1,
    fill: 'origin',
  },
  {
    type: 'line',
    label: "1",
    data: [10, 12, 14, 16, 18, 20, 22],
    backgroundColor: "rgba(255, 99, 132, 0.2)",
    borderColor: "rgb(255, 99, 132)",
    borderWidth: 1,
    fill: '-1',
  },
  {
    type: 'line',
    label: "2",
    data: [10, 13, 16, 19, 22, 25, 28],
    backgroundColor: "rgba(255, 206, 86, 0.2)",
    borderColor: "rgb(255, 206, 86)",
    borderWidth: 1,
    fill: 1,
  },
  {
    type: 'line',
    label: "3",
    data: [10, 14, 18, 22, 26, 30, 34],
    backgroundColor: "rgba(201, 203, 207, 0.2)",
    borderColor: "rgb(201, 203, 207)",
    borderWidth: 1,
    fill: false,
  },
  {
    type: 'line',
    label: "4",
    data: [10, 15, 20, 25, 30, 35, 40],
    backgroundColor: "rgba(75, 192, 192, 0.2)",
    borderColor: "rgb(75, 192, 192)",
    borderWidth: 1,
    fill: '-2',
  }]
};

// propagate: true
var ctx = document.getElementById('myChart1').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
      plugins: {
        filler: {
          propagate: true
        }
      },
    }
});

// propagate: false
var ctx = document.getElementById('myChart2').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
      plugins: {
        filler: {
          propagate: false
        }
      },
    }
});

HTML

<canvas id="myChart1"></canvas>
<canvas id="myChart2"></canvas>