CngxBand

ComponentPrimaryOnPushNo encapsulationv0.1.0

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

Import#

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

Description#

Band reference atom. Renders a <rect> across a vertical Y-range (from..to) spanning the chart's full width. Use to highlight a value range (e.g. "good zone", "watch zone") behind primary layers.

Default opacity is low (var(--cngx-band-opacity, 0.12)) so the band sits behind line / area / bar layers without dominating.

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

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#

Selector: [cngxBand]
Export as: cngxBand
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None

Index#

Inputs

from label opacity to

Derived State

rect

Inputs#

from#number

input()Required

label#string | null

input()

default null

opacity#number | string | null