CngxDeviationBar
projects/common/chart/presets/deviation-bar.component.ts
Import#
import { CngxDeviationBar } from '@cngx/common/chart'
Description#
Mini deviation bar - a single-value indicator that diverges from a
[baseline] (default 0) in either direction. Negative deviations
render to the left of the baseline mark, positive to the right.
Pure DOM, no SVG. Host carries role="meter".
Use cases: budget variance ("$+45k over"), score deltas ("−12% vs target"), KPI swing visualisations.
Metadata#
Host#
Index#
Properties
Derived State
Inputs#
Instance Properties#
HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-valuenow] | value() |
[attr.aria-valuemin] | -magnitude() |
[attr.aria-valuemax] | magnitude() |
[attr.aria-label] | ariaLabel() |
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.