エリアチャート

折れ線グラフとレーダーグラフはどちらも、データセットオブジェクトにfillオプションをサポートしており、これを使用して、2つのデータセット間、またはデータセットと境界（スケールのorigin、start、またはendなど）の間のスペースを作成できます（塗りつぶしモードを参照）。

注

この機能は、fillerプラグイン (新しいウィンドウで開きます)によって実装されています。

塗りつぶしモード

モード	タイプ	値
絶対データセットインデックス	数値	1, 2, 3, ...
相対データセットインデックス	文字列	'-1', '-2', '+1', ...
境界	文字列	'start'、'end'、'origin'
無効1	ブール値	false
下の積み重ねられた値	文字列	'stack'
軸の値	オブジェクト	{ value: 数値; }
形状（線内の塗りつぶし）	文字列	'shape'

¹後方互換性のため、fill: trueはfill: 'origin'と同等です

例

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},      // 0: fill to 'origin'
            {fill: '+2'},          // 1: fill to dataset 3
            {fill: 1},             // 2: fill to dataset 1
            {fill: false},         // 3: no fill
            {fill: '-2'},          // 4: fill to dataset 2
            {fill: {value: 25}}    // 5: fill to axis value 25
        ]
    }
});

1つのデータセットから別のデータセットへ塗りつぶすときに複数の色をサポートする必要がある場合は、次のオプションを持つオブジェクトを指定できます。

パラメータ	タイプ	説明
target	数値、文字列、ブール値、オブジェクト	受け入れられる値は、塗りつぶしモードの値と同じであるため、絶対および相対データセットインデックスや境界を使用できます。
above	色	色が設定されていない場合、デフォルトの色はチャートの背景色になります。
below	色	上記と同じ。

複数の色を使用した例

new Chart(ctx, {
    data: {
        datasets: [
            {
              fill: {
                target: 'origin',
                above: 'rgb(255, 0, 0)',   // Area will be red above the origin
                below: 'rgb(0, 0, 255)'    // And blue below the origin
              }
            }
        ]
    }
});

設定

名前空間：options.plugins.filler

オプション	タイプ	デフォルト	説明
drawTime	文字列	beforeDatasetDraw	Fillerの描画タイミング。サポートされている値：'beforeDraw'、'beforeDatasetDraw'、'beforeDatasetsDraw'
propagate	ブール値	true	ターゲットが非表示の場合の塗りつぶし伝播。

propagate

propagateはブール値を受け取ります（デフォルト：true）。

trueの場合、非表示のデータセットターゲットのfill値によって定義された表示可能なターゲットに、塗りつぶし領域が再帰的に拡張されます。

propagateを使用した例

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},   // 0: fill to 'origin'
            {fill: '-1'},       // 1: fill to dataset 0
            {fill: 1},          // 2: fill to dataset 1
            {fill: false},      // 3: no fill
            {fill: '-2'}        // 4: fill to dataset 2
        ]
    },
    options: {
        plugins: {
            filler: {
                propagate: true
            }
        }
    }
});

propagate: true：-データセット2が非表示の場合、データセット4はデータセット1まで塗りつぶされます。-データセット2と1が非表示の場合、データセット4は'origin'まで塗りつぶされます。

propagate: false：-データセット2および/または4が非表示の場合、データセット4は塗りつぶされません。