Skip to main content
cngx-src documentation

CngxChartOverlay

Directivev0.1.0

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

Import#

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

Description#

*cngxChartOverlay slot - projects HTML on top of the marks, inside the plot area. Unlike the loading / empty / error slots (which replace the marks in their respective fallback arms), the overlay renders in the @default content arm alongside the drawn chart, so it is where crosshair readouts, hover tooltips, annotation callouts and brush affordances belong.

The chart positions the overlay frame itself, inset to the plot area via the --cngx-chart-plot-* custom properties it already publishes - the consumer performs no exportAs, no plot() / dimensions() arithmetic, and needs no wrapper of their own to act as a containing block. Receives the shared CngxChartSlotContext, so plot / width / height / small are all readable from the template:

<cngx-chart [data]="series()" [width]="480" [height]="200">
  <svg:g cngxAxis position="left" type="linear" [domain]="[0, 100000]"></svg:g>
  <svg:g cngxLine></svg:g>
  <ng-template cngxChartOverlay let-plot="plot">
    <div class="my-callout">{{ plot.width }}x{{ plot.height }} plot</div>
  </ng-template>
</cngx-chart>

Pointer events: the frame is pointer-events: none, so it never intercepts a click, hover or drag meant for the marks beneath it. An interactive element inside the overlay opts back in per element with pointer-events: auto. The default is off deliberately - an overlay that silently swallows every pointer event on the chart is invisible until some other interaction (a tooltip, a brush) stops firing, and that is a debugging session; opting a single element back in is one declaration.

Accessibility: the chart host is role="img" with an auto-summary aria-label, so assistive technology sees the chart as a single labelled graphic and never traverses into the overlay. Treat overlay content as visual - a hover readout, a tint, an annotation callout. Any state that has to reach AT belongs on the reactive summary or the SR data-table (the aria-describedby channel the chart already owns), not on an element projected here.

Metadata#

Dependencies#

TemplateRefinject()templateRef