CngxAxis
projects/common/chart/axis/axis.component.ts
Import#
import { CngxAxis } from '@cngx/common/chart'
Description#
Declarative axis directive. Lives as a content child of
<cngx-chart>; its position + type + domain inputs feed the
parent's scale derivation. Renders SVG ticks and labels in the
coordinate system the parent publishes via CNGX_CHART_CONTEXT.
Attribute-selector on <svg:g> - the host element IS the SVG group.
This keeps the namespace boundary clean: a <cngx-axis> element
inside <svg> would be in the XHTML namespace and SVG layout would
not flow through it. By making the directive attribute-only, the
host stays in the SVG namespace and the browser lays out tick lines
and labels exactly where the geometry says.
Host carries aria-hidden="true" - axis text is decoration; the
semantic data view lives on the parent chart's auto-Summary and
Data Table.
Metadata#
Host#
Relationships
Index#
Inputs#
string | nullOptional axis title rendered alongside the tick labels -
"Months", "Revenue (k€)", etc. The title is positioned outside
the tick labels (further from the chart area) and rotated -90°
for left/right axes so it reads bottom-to-top. Theming via the
--cngx-axis-axis-label-color and --cngx-axis-axis-label-font-size
CSS custom properties (default: chart text colour + 12px). Aliased
[label] for terseness.
null, { alias: 'label' }readonly unknown[] | undefined(v: unknown) => stringdefaultTickFormatCngxAxisPositionRender decorative gridlines extending from each tick across the
chart's perpendicular dimension. Theming via the
--cngx-axis-grid-color / --cngx-axis-grid-opacity /
--cngx-axis-grid-stroke-width / --cngx-axis-grid-dasharray
CSS custom properties (defaults: chart-level grid colour, 0.6
opacity, 1px solid). Aliased as [grid] for terseness.
false, { alias: 'grid' }HostBindings#
| Binding | Expression |
|---|---|
[attr.transform] | axisGeometry()?.transform ?? null |
[attr.class] | hostClass() |