diff --git a/js/ui/chart/docs/charts/area.md b/js/ui/chart/docs/charts/area.md new file mode 100644 index 0000000..824a469 --- /dev/null +++ b/js/ui/chart/docs/charts/area.md @@ -0,0 +1,72 @@ +# Area Charts + +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)). + +> **Note:** this feature is implemented by the [`filler` plugin](https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.filler.js). + +## 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** +```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 + {fill: '-2'} // 4: fill to dataset 2 + ] + } +}); +``` + +## Configuration +| Option | Type | Default | Description | +| :--- | :--- | :--- | :--- | +| [`plugins.filler.propagate`](#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** +```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 + } + } + } +}); +``` + +`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