Skip to main content
cngx-src documentation

CngxBar

ComponentPrimaryOnPushNo encapsulationv0.1.0

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

Import#

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

Description#

Bar layer atom. Renders one <rect> per datapoint. Bar width comes from dimensions.width / dataLength (one slot per datapoint) shrunk by the optional [gap] ratio. Bar height runs from yScale(value) down to yScale(baseline) (default 0) — SVG bottom-anchored.

Bar does NOT require a band X scale; the slot width is purely geometric. This keeps the atom usable with linear or band X axes interchangeably.

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#

Index#

Properties

Derived State

Inputs#

baseline#number
input()
default FALLBACK_BASELINE
data#readonly T[] | undefined
input()
input()
default 0.1

Instance Properties#

accessor#unknown
Readonly
input<BarYAccessor<T>>(((d: T) => Number(d)) as BarYAccessor<T>)