| commit | author | age | ||
| 83c3f6 | 1 | # Area Charts |
| SP | 2 | |
| 3 | Both [line](line.md) and [radar](radar.md) 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](#filling-modes)). | |
| 4 | ||
| 5 | > **Note:** this feature is implemented by the [`filler` plugin](https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.filler.js). | |
| 6 | ||
| 7 | ## Filling modes | |
| 8 | ||
| 9 | | Mode | Type | Values | | |
| 10 | | :--- | :--- | :--- | | |
| 11 | | Absolute dataset index <sup>1</sup> | `Number` | `1`, `2`, `3`, ... | | |
| 12 | | Relative dataset index <sup>1</sup> | `String` | `'-1'`, `'-2'`, `'+1'`, ... | | |
| 13 | | Boundary <sup>2</sup> | `String` | `'start'`, `'end'`, `'origin'` | | |
| 14 | | Disabled <sup>3</sup> | `Boolean` | `false` | | |
| 15 | ||
| 16 | > <sup>1</sup> dataset filling modes have been introduced in version 2.6.0<br> | |
| 17 | > <sup>2</sup> prior version 2.6.0, boundary values was `'zero'`, `'top'`, `'bottom'` (deprecated)<br> | |
| 18 | > <sup>3</sup> for backward compatibility, `fill: true` (default) is equivalent to `fill: 'origin'`<br> | |
| 19 | ||
| 20 | **Example** | |
| 21 | ```javascript | |
| 22 | new Chart(ctx, { | |
| 23 | data: { | |
| 24 | datasets: [ | |
| 25 | {fill: 'origin'}, // 0: fill to 'origin' | |
| 26 | {fill: '+2'}, // 1: fill to dataset 3 | |
| 27 | {fill: 1}, // 2: fill to dataset 1 | |
| 28 | {fill: false}, // 3: no fill | |
| 29 | {fill: '-2'} // 4: fill to dataset 2 | |
| 30 | ] | |
| 31 | } | |
| 32 | }) | |
| 33 | ``` | |
| 34 | ||
| 35 | ## Configuration | |
| 36 | | Option | Type | Default | Description | | |
| 37 | | :--- | :--- | :--- | :--- | | |
| 38 | | [`plugins.filler.propagate`](#propagate) | `Boolean` | `true` | Fill propagation when target is hidden | |
| 39 | ||
| 40 | ### propagate | |
| 41 | Boolean (default: `true`) | |
| 42 | ||
| 43 | If `true`, the fill area will be recursively extended to the visible target defined by the `fill` value of hidden dataset targets: | |
| 44 | ||
| 45 | **Example** | |
| 46 | ```javascript | |
| 47 | new Chart(ctx, { | |
| 48 | data: { | |
| 49 | datasets: [ | |
| 50 | {fill: 'origin'}, // 0: fill to 'origin' | |
| 51 | {fill: '-1'}, // 1: fill to dataset 0 | |
| 52 | {fill: 1}, // 2: fill to dataset 1 | |
| 53 | {fill: false}, // 3: no fill | |
| 54 | {fill: '-2'} // 4: fill to dataset 2 | |
| 55 | ] | |
| 56 | }, | |
| 57 | options: { | |
| 58 | plugins: { | |
| 59 | filler: { | |
| 60 | propagate: true | |
| 61 | } | |
| 62 | } | |
| 63 | } | |
| 64 | }) | |
| 65 | ``` | |
| 66 | ||
| 67 | `propagate: true`: | |
| 68 | - if dataset 2 is hidden, dataset 4 will fill to dataset 1 | |
| 69 | - if dataset 2 and 1 are hidden, dataset 4 will fill to `'origin'` | |
| 70 | ||
| 71 | `propagate: false`: | |
| 72 | - if dataset 2 and/or 4 are hidden, dataset 4 will not be filled | |
