charts/area

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Area chart propagate example

The following example demonstrates the propagate option: 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 } } } });

Area chart fill option

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 (the scale origin, start, or end). This feature is implemented by the filler plugin.

Filling modes for area charts

Area charts support the following filling modes: Absolute dataset index (number like 1, 2, 3), Relative dataset index (string like '-1', '-2', '+1'), Boundary values (string 'start', 'end', or 'origin'), Disabled (boolean false), Stacked value below (string 'stack'), Axis value (object with {value: number}), and Shape (string 'shape' to fill inside line). For backward compatibility, fill: true is equivalent to fill: 'origin'.

Area chart fill with multiple colors

When filling from one dataset to another with multiple colors, specify an object with the following parameters: target (number, string, boolean, or object - accepts the same values as filling modes), above (Color - the color above the target, defaults to the chart background color if not set), and below (Color - the color below the target, defaults to the chart background color if not set).

Filler plugin configuration options

The filler plugin is configured under options.plugins.filler with the following options: drawTime (string, default 'beforeDatasetDraw') - specifies when the filler is drawn, with supported values 'beforeDraw', 'beforeDatasetDraw', or 'beforeDatasetsDraw'; propagate (boolean, default true) - determines whether fill area is recursively extended to visible targets when a target dataset is hidden.

Area chart propagate option behavior

The propagate option controls fill behavior when target datasets are hidden. When propagate is true, the fill area is recursively extended to the visible target defined by the fill value of hidden dataset targets. When propagate is false, if a target dataset is hidden, the dataset will not be filled. For example, if propagate is true and dataset 2 is hidden, dataset 4 with fill: '-2' will fill to dataset 1 instead. If datasets 2 and 1 are both hidden, dataset 4 will fill to 'origin'.

Area chart fill dataset option example

The following example demonstrates various fill modes: 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 ] } });

Area chart fill with multiple colors example

The following example demonstrates filling with different colors above and below a target: 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 } } ] } });

Line chart with stacked fills example

A line chart with stacked area fills configured with four datasets, each with label, data array, borderColor, backgroundColor, and fill: true. The chart is configured with scales.y.stacked set to true, interaction mode 'nearest' on x-axis, and tooltip mode 'index'.

Give your agent this brain