forked from chartjs/Chart.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Document the new filling modes and options (chartjs#4251)
- Loading branch information
1 parent
ae207f8
commit c443223
Showing
6 changed files
with
87 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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](/chartjs/Chart.js/blob/master/src/plugins/plugin.filler.js). | ||
## Filling modes | ||
|
||
| Mode | Type | Values | | ||
| :--- | :--- | :--- | | ||
| Absolute dataset index <sup>1</sup> | `Number` | `1`, `2`, `3`, ... | | ||
| Relative dataset index <sup>1</sup> | `String` | `'-1'`, `'-2'`, `'+1'`, ... | | ||
| Boundary <sup>2</sup> | `String` | `'start'`, `'end'`, `'origin'` | | ||
| Disabled <sup>3</sup> | `Boolean` | `false` | | ||
|
||
> <sup>1</sup> dataset filling modes have been introduced in version 2.6.0<br> | ||
> <sup>2</sup> prior version 2.6.0, boundary values was `'zero'`, `'top'`, `'bottom'` (deprecated)<br> | ||
> <sup>3</sup> for backward compatibility, `fill: true` (default) is equivalent to `fill: 'origin'`<br> | ||
**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 | ||
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** | ||
```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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,3 +9,7 @@ a.anchorjs-link { | |
a.anchorjs-link:hover { | ||
color: rgba(65, 131, 196, 1); | ||
} | ||
|
||
sup { | ||
font-size: 0.75em !important; | ||
} |