# 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 plugin (opens new window).
# Filling modes
| Mode | Type | Values |
|---|---|---|
| Absolute dataset index | number | 1, 2, 3, ... |
| Relative dataset index | string | '-1', '-2', '+1', ... |
| Boundary | string | 'start', 'end', 'origin' |
| Disabled 1 | boolean | false |
| Stacked value below | string | 'stack' |
| Axis value | object | { value: number; } |
| Shape (fill inside line) | string | 'shape' |
1 for backward compatibility,
fill: trueis 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
{fill: {value: 25}} // 5: fill to axis value 25
]
}
});
If you need to support multiple colors when filling from one dataset to another, you may specify an object with the following option :
| Param | Type | Description |
|---|---|---|
target | number, string, boolean, object | The accepted values are the same as the filling mode values, so you may use absolute and relative dataset indexes and/or boundaries. |
above | Color | If no color is set, the default color will be the background color of the chart. |
below | Color | Same as the above. |
# Example with multiple colors
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
}
}
]
}
});
# Configuration
Namespace: options.plugins.filler
| Option | Type | Default | Description |
|---|---|---|---|
drawTime | string | beforeDatasetDraw | Filler draw time. Supported values: 'beforeDraw', 'beforeDatasetDraw', 'beforeDatasetsDraw' |
propagate | boolean | true | Fill 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
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