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
fillerplugin.
Filling modes
| Mode | Type | Values |
|---|---|---|
| Absolute dataset index 1 | Number |
1, 2, 3, ... |
| Relative dataset index 1 | String |
'-1', '-2', '+1', ... |
| Boundary 2 | String |
'start', 'end', 'origin' |
| Disabled 3 | Boolean |
false |
1 dataset filling modes have been introduced in version 2.6.0
2 prior version 2.6.0, boundary values was'zero','top','bottom'(deprecated)
3 for backward compatibility,fill: true(default) is equivalent tofill: 'origin'
Example
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
]
}
})
Configuration
| Option | Type | Default | Description |
|---|---|---|---|
plugins.filler.propagate |
Boolean |
true |
Fill 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
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:
- 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