Area Chart

Both line and radar charts support a fill option on the dataset object which can be used to create space 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 pluginArea Chart - 图1 (opens new window).

Filling modes

ModeTypeValues
Absolute dataset indexnumber1, 2, 3, …
Relative dataset indexstring‘-1’, ‘-2’, ‘+1’, …
Boundarystring‘start’, ‘end’, ‘origin’
Disabled 1booleanfalse
Stacked value belowstring‘stack’
Axis valueobject{ value: number; }

1 for backward compatibility, fill: true 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. {fill: {value: 25}} // 5: fill to axis value 25
  10. ]
  11. }
  12. });

If you need to support multiple colors when filling from one dataset to another, you may specify an object with the following option :

ParamTypeDescription
targetnumber, string, boolean, objectThe accepted values are the same as the filling mode values, so you may use absolute and relative dataset indexes and/or boundaries.
aboveColorIf no color is set, the default color will be the background color of the chart.
belowColorSame as the above.

Example with multiple colors

  1. new Chart(ctx, {
  2. data: {
  3. datasets: [
  4. {
  5. fill: {
  6. target: 'origin',
  7. above: 'rgb(255, 0, 0)', // Area will be red above the origin
  8. below: 'rgb(0, 0, 255)' // And blue below the origin
  9. }
  10. }
  11. ]
  12. }
  13. });

Configuration

Namespace: options.plugins.filler

OptionTypeDefaultDescription
drawTimestringbeforeDatasetDrawFiller draw time. Supported values: ‘beforeDraw’, ‘beforeDatasetDraw’, ‘beforeDatasetsDraw’
propagatebooleantrueFill propagation when target is hidden.

propagate

propagate takes a boolean value (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 using propagate

  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