CngxChartSlotContext

Interface

projects/common/chart/chart/template-slots.ts

Info
API

Referenced by#

Import#

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

Description#

Common context shape passed into every chart slot template (loading, empty, error). Carries the chart's current rendered dimensions plus a small discriminator so consumers can switch between a compact and a richer fallback in the same template:

<ng-template cngxChartEmpty let-small="small">
  @if (small) {
    <span class="cngx-empty-compact">No data</span>
  } @else {
    <cngx-empty-state title="No telemetry yet" description="..." />
  }
</ng-template>

The small flag is true when the chart's rendered width is below the exported CHART_SMALL_BREAKPOINT_PX constant (400). Container-size based, not viewport-based, so it works correctly inside dashboard cells of any size.

Index#

Properties

height plot small width

Instance Properties#

height#number

Readonly

plot#CngxChartPlotArea

Readonly

The rectangle the chart's marks occupy: the viewBox minus the room the projected axes reserved for their decoration. Without axes it equals the box.

Slot templates paint over the chart, and since the axis gutter landed the box is no longer the drawing surface - a fallback centred on width/height sits off-centre from the marks it replaces. Align to this instead when the fallback should line up with the plot rather than with the host.

In viewBox user units. width/height above stay the rendered host size, so the two are in different spaces whenever an explicit [width] chart is squeezed; use the --cngx-chart-plot-* custom properties for CSS-side alignment, which are resolution-independent.

small#boolean

Readonly

width#number

Readonly