Area · Chart.js documentation

# 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

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 to `fill: '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

# results matching ""

# No results matching ""