Area Chart | Chart.js
Description: Open source HTML5 Charts for your website

# # 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: true` 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
                {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