Area Charts

Both line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end (see filling modes).

Note: this feature is implemented by the filler plugin.

Filling modes

ModeTypeValues
Absolute dataset index 1Number1, 2, 3, …
Relative dataset index 1String'-1', '-2', '+1', …
Boundary 2String'start', 'end', 'origin'
Disabled 3Booleanfalse
1 dataset filling modes have been introduced in version 2.6.02 prior version 2.6.0, boundary values was 'zero', 'top', 'bottom' (deprecated)3 for backward compatibility, fill: true (default) is equivalent to fill: 'origin'

Example

  1. new Chart(ctx, {
  2.     data: {
  3.         datasets: [
  4.             {fill: 'origin'},      // 0: fill to 'origin'
  5.             {fill: '+2'},          // 1: fill to dataset 3
  6.             {fill: 1},             // 2: fill to dataset 1
  7.             {fill: false},         // 3: no fill
  8.             {fill: '-2'}           // 4: fill to dataset 2
  9.         ]
  10.     }
  11. })

Configuration

OptionTypeDefaultDescription
plugins.filler.propagateBooleantrueFill propagation when target is hidden

propagate

Boolean (default: true)

If true, the fill area will be recursively extended to the visible target defined by the fill value of hidden dataset targets:

Example

  1. new Chart(ctx, {
  2.     data: {
  3.         datasets: [
  4.             {fill: 'origin'},   // 0: fill to 'origin'
  5.             {fill: '-1'},       // 1: fill to dataset 0
  6.             {fill: 1},          // 2: fill to dataset 1
  7.             {fill: false},      // 3: no fill
  8.             {fill: '-2'}        // 4: fill to dataset 2
  9.         ]
  10.     },
  11.     options: {
  12.         plugins: {
  13.             filler: {
  14.                 propagate: true
  15.             }
  16.         }
  17.     }
  18. })

propagate: true:

  • if dataset 2 is hidden, dataset 4 will fill to dataset 1

  • if dataset 2 and 1 are hidden, dataset 4 will fill to 'origin'
    propagate: false:

  • if dataset 2 and/or 4 are hidden, dataset 4 will not be filled