2021-03-30 16:32:39 +02:00
# Area Chart
2017-05-13 14:13:05 +02:00
2021-04-02 13:48:50 +02:00
Both [line ](./line.md ) and [radar ](./radar.md ) 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 ](#filling-modes )).
2017-05-13 14:13:05 +02:00
2021-03-31 00:19:45 +02:00
:::tip Note
2021-03-30 16:32:39 +02:00
This feature is implemented by the [`filler` plugin ](https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.filler.js ).
:::
2017-05-13 14:13:05 +02:00
## Filling modes
| Mode | Type | Values |
| :--- | :--- | :--- |
2020-11-19 14:25:39 +01:00
| Absolute dataset index | `number` | `1` , `2` , `3` , ... |
| Relative dataset index | `string` | `'-1'` , `'-2'` , `'+1'` , ... |
| Boundary | `string` | `'start'` , `'end'` , `'origin'` |
| Disabled < sup > 1</ sup > | `boolean` | `false` |
2021-03-07 16:52:31 +01:00
| Stacked value below | `string` | `'stack'` |
2020-11-19 14:25:39 +01:00
| Axis value | `object` | `{ value: number; }` |
2017-05-13 14:13:05 +02:00
2020-11-28 21:07:46 +01:00
> <sup>1</sup> for backward compatibility, `fill: true` is equivalent to `fill: 'origin'`<br/>
2017-05-13 14:13:05 +02:00
2021-02-18 14:17:39 +01:00
### Example
2020-08-11 15:31:18 +02:00
2017-05-13 14:13:05 +02:00
```javascript
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
2020-10-17 21:46:56 +02:00
{fill: '-2'}, // 4: fill to dataset 2
{fill: {value: 25}} // 5: fill to axis value 25
2017-05-13 14:13:05 +02:00
]
}
2019-01-29 13:34:16 +01:00
});
2017-05-13 14:13:05 +02:00
```
2019-11-21 19:48:31 +01:00
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 |
| :--- | :--- | :--- |
2020-10-17 21:46:56 +02:00
| `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. |
2019-11-21 19:48:31 +01:00
| `above` | `Color` | If no color is set, the default color will be the background color of the chart. |
| `below` | `Color` | Same as the above. |
2021-02-18 14:17:39 +01:00
### Example with multiple colors
2020-08-11 15:31:18 +02:00
2019-11-21 19:48:31 +01:00
```javascript
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
}
}
]
}
});
```
2017-05-13 14:13:05 +02:00
## Configuration
2020-08-11 15:31:18 +02:00
2017-05-13 14:13:05 +02:00
| Option | Type | Default | Description |
| :--- | :--- | :--- | :--- |
2019-01-29 13:34:16 +01:00
| [`plugins.filler.propagate` ](#propagate ) | `boolean` | `true` | Fill propagation when target is hidden.
2017-05-13 14:13:05 +02:00
### propagate
2020-08-11 15:31:18 +02:00
2019-01-29 13:34:16 +01:00
`propagate` takes a `boolean` value (default: `true` ).
2017-05-13 14:13:05 +02:00
If `true` , the fill area will be recursively extended to the visible target defined by the `fill` value of hidden dataset targets:
2021-02-18 14:17:39 +01:00
#### Example using propagate
2020-08-11 15:31:18 +02:00
2017-05-13 14:13:05 +02:00
```javascript
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
}
}
}
2019-01-29 13:34:16 +01:00
});
2017-05-13 14:13:05 +02:00
```
`propagate: true` :
2020-08-11 15:31:18 +02:00
-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'`
2017-05-13 14:13:05 +02:00
`propagate: false` :
2020-08-11 15:31:18 +02:00
-if dataset 2 and/or 4 are hidden, dataset 4 will not be filled