Skip to main content
cngx-src documentation

CngxArea

ComponentPrimaryOnPushNo encapsulationv0.1.0

projects/common/chart/layers/area.component.ts

Import#

import { CngxArea } from '@cngx/common/chart'

Description#

Area layer atom. Reuses createPathBuilder for the upper edge (same compute guard as [cngxLine]) and closes the polygon to a [baseline] (default 0) so SVG can fill it.

Attribute-selector on <svg:g> - see CngxLine for why.

The d string is cascade-guarded with string equality on its computed so a no-op data refresh does not force a fill repaint.

A single-datum area closes on itself at one x and covers no pixels, so a series shorter than two points paints a point marker instead of nothing. [points] mirrors CngxLine: 'auto' (default) marks only the one-datum case, 'always' every datum, 'never' none.

https://cngxjs.github.io/cngx/examples/#/common/chart/primitives/async-state-machine-on-the-primitive https://cngxjs.github.io/cngx/examples/#/common/chart/primitives/combo-bars-moving-average-line https://cngxjs.github.io/cngx/examples/#/common/chart/primitives/line-area-threshold-band https://cngxjs.github.io/cngx/examples/#/common/chart/primitives/multi-series-line-axis-labels-legend https://cngxjs.github.io/cngx/examples/#/common/chart/primitives/responsive-fills-parent-width https://cngxjs.github.io/cngx/examples/#/common/chart/primitives/scatter-with-performance-zones https://cngxjs.github.io/cngx/examples/#/common/chart/primitives/time-series-with-threshold-zones

Metadata#

Providers#

CNGX_CHART_LAYER
useExisting CngxArea

Relationships

Index#

Inputs#

default (d: T) => Number(d)
baseline#number
input()
default 0
color#string | null
input()
default null
input()
default 'linear'
data#readonly T[] | undefined
input()
opacity#number | string | null
input()
default null
points#"auto" | "always" | "never"
input()

Point-marker mode, mirroring CngxLine. 'auto' (default) draws a marker only for a single-datum series - an area closed on itself at one x covers no pixels and paints nothing otherwise. 'always' marks every datum; 'never' suppresses markers.

default 'auto'

Instance Properties#

ctx#unknown
ProtectedReadonly
injectChartContext('CngxArea')