CngxChart
projects/common/chart/chart/chart.component.ts
Import#
import { CngxChart } from '@cngx/common/chart'
Description#
Metadata#
Host#
Providers#
CNGX_CHART_CONTEXT- useExisting
CngxChart
Dependencies#
CNGX_CHART_I18Ninject()i18nRelationships
Index#
Properties
Methods
Derived State
Inputs#
"auto" | "off"Controls when the SR-only data-table view is exposed to assistive
technology. 'auto' (default) shows the table whenever the data
has more than one point - a single value is announced via the
aria-label, no table needed. 'off' keeps the table hidden
regardless. The table element is always present in the DOM -
visibility flips through aria-hidden, the linked id on
aria-describedby never disappears.
'auto'string | nullOptional explicit aria-label override. When set, supersedes the
auto-Summary derived from data + threshold layers. Use when the
default summary phrasing does not fit the chart's domain.
null, { alias: 'aria-label' }number | undefinedOptional async-state envelope. When bound, the chart routes through
the same skeleton / empty / error / content state machine that the
preset molecules use. Without this input, the chart always renders
its content (Pillar-2 always-in-DOM data-table id stays stable, but
the SR data-table only flips out of aria-hidden when the active
view is 'content').
Accepts the standard CngxAsyncState<T> shape (any producer:
createManualState, createAsyncState, injectAsyncState,
fromHttpResource, tap* pipeline output). The chart provides
CNGX_STATEFUL for downstream bridge directives - composing
<cngx-toast-on /> etc. inside the chart works automatically.
(d: T, i: number) => numberNumeric accessor used to project generic data to the values fed
into the auto-Summary. Default Number(d) works for readonly number[] data; structured data must override.
DEFAULT_SUMMARY_ACCESSORnumber | undefinedInstance Properties#
unknowncomputed<ScaleFn<XScaleInput>>(
() => {
const axes = this.axes();
const { width } = this.dimensions();
if (width <= 0) {
return NOOP_SCALE;
}
const xAxis = axes.find((a) => isHorizontalPosition(a.position()));
if (!xAxis) {
return NOOP_SCALE;
}
return this.xScaleCache.get(xAxis.type(), xAxis.domain() ?? [], [0, width]);
},
{ equal: (a, b) => a === b },
)unknowncomputed<ScaleFn<number>>(
() => {
const axes = this.axes();
const { height } = this.dimensions();
if (height <= 0) {
return NOOP_Y_SCALE;
}
const yAxis = axes.find((a) => isVerticalPosition(a.position()));
if (!yAxis) {
return NOOP_Y_SCALE;
}
// SVG Y-axis is flipped - domain[max] maps to range[0] (top), domain[min] to range[height] (bottom).
return this.yScaleCache.get(yAxis.type(), yAxis.domain() ?? [], [
height,
0,
]) as ScaleFn<number>;
},
{ equal: (a, b) => a === b },
)Methods#
U[]Generic-aware data accessor satisfying CngxChartContext.data.
The single boundary cast lives here; layer atoms call
this.ctx.data<T>() and receive readonly T[] directly with no
per-site as cast.
HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-label] | ariaLabelText() |
[attr.aria-describedby] | dataTableId |
[attr.aria-busy] | busy() ? "true" : null |
[class.cngx-chart--responsive] | isResponsive() |
[style.width.px] | width() ?? null |
[style.aspect-ratio] | explicitAspectRatio() |
Chart-level CSS custom properties consumed by every chart atom in
@cngx/common/chart. This file is a pure token surface - no
selectors apart from :root, no @scope. A two-level cascade keeps
multi-layer recoloring side-effect-free: atom-local var (e.g.
--cngx-line-color) -> chart-level var (--cngx-chart-primary)
-> consumer accent (--accent, --danger) -> foundation token.
Atom-local pass-through
Each atom owns its own --cngx-<atom>-color token that always
falls back to the matching chart-level token, never to a literal.
Recoloring one line on a multi-layer chart stays scoped to that
line; overriding --cngx-chart-primary would otherwise shift
every layer (Pillar 3: no configuration-by-side-effect).
--cngx-line-color--cngx-area-fill--cngx-bar-color--cngx-scatter-color--cngx-threshold-color--cngx-band-color
Inheritance
Each chart-level token chains through a consumer-facing accent
tier and then a foundation --cngx-color-* token, so brand
overrides at either level cascade automatically. Because
@property initial-value cannot reference var(), the literal
defaults are mirrored in :root assignments:
--cngx-chart-primary->--accent->--cngx-color-primary--cngx-chart-secondary->--accent-secondary->--cngx-color-text-muted--cngx-chart-danger->--danger->--cngx-color-danger--cngx-chart-success->--success->--cngx-color-success--cngx-chart-axis-color->--text-secondary->--cngx-color-text-muted--cngx-chart-text-color->--text-primary->--cngx-color-text--cngx-chart-grid-color-color-mix(currentColor 14%)overlay, paints at consistent contrast on any body surface--cngx-skeleton-bg- samecurrentColoroverlay shared with the chart skeleton placeholder
Index#
Variant / Danger
Variant / Success
Typography
Surface
<color>oklch(0.66 0.19 50)Primary line / fill color shared by chart atoms. Falls back
through the consumer-facing --accent and then to the foundation
--cngx-color-primary (Ember).
See: [[--cngx-color-primary]]
<color>oklch(0.65 0.02 250)Secondary fill color for multi-series layers.
Variant / Danger
<color>oklch(0.55 0.18 25)Danger-coded series color.
See: [[--cngx-color-danger]]
Variant / Success
<color>oklch(0.55 0.15 145)Success-coded series color.
See: [[--cngx-color-success]]
Typography
<color>oklch(0.25 0.015 250)Axis / legend / annotation text color.