* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
3.3 KiB
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).
:::tip
This feature is implemented by the filler
plugin.
:::
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; } |
1 for backward compatibility,
fill: true
is equivalent tofill: '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
Option | Type | Default | Description |
---|---|---|---|
plugins.filler.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