CngxSparkline
projects/common/chart/presets/sparkline.component.ts
Import#
import { CngxSparkline } from '@cngx/common/chart'
Description#
Inline sparkline - a tiny line chart for KPI cards and dashboard
tiles. Composes <cngx-chart> + <cngx-line> (+ optional
<cngx-area>) with hidden axes that publish the scale domain
derived from the data array.
Default viewBox is 80×24, intended for inline placement next to a
label or numeric value. Theming via --cngx-sparkline-color
(atom-local) → --cngx-chart-primary (chart-level) cascade.
The host carries role="img" and a reactive aria-label derived
from the chart's auto-Summary; consumers can override via
[ariaLabel].
Metadata#
Relationships
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.