# 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; } |
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 ] } });
Copied!
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 } } ] } });
Copied!
# 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 } } } });
Copied!
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