Scatter Chart for Angular

import { AuiScatterChart } from '@absoluteui/angular/scatter-chart';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Scatter Chart page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { scatterChart: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiScatterChart } from '@absoluteui/angular/scatter-chart';
import type { ScatterChartSeries, ScatterChartZoomDetail } from '@absoluteui/components/scatter-chart';

@Component({
  selector: 'app-correlation',
  imports: [AuiScatterChart],
  template: `<aui-scatter-chart label="Height and weight" [series]="series" [zoom]="'xy'" [crosshair]="true" (zoomed)="onZoom($event)"></aui-scatter-chart>`,
})
export class CorrelationComponent {
  readonly series: ScatterChartSeries[] = [{ id: 'a', label: 'Group A', points: [{ x: 160, y: 55 }, { x: 175, y: 72 }] }];
  zoomed = false;
  onZoom(detail: ScatterChartZoomDetail): void {
    this.zoomed = detail.x !== null || detail.y !== null;
  }
}

`<aui-scatter-chart>`

Class AuiScatterChart; template reference #ref="auiScatterChart".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
`label`	`string`		Required. Chart title: visible text and the accessible name of the plot (aria-labelledby).
`hideLabel`	`boolean`	`false`	Visually hide the title; it stays the accessible name.
`description`	`string`		Visible description below the title, also referenced by aria-describedby (text only).
`summary`	`string`		Replaces the generated accessible summary (aria-describedby).
`valueFormat`	`NumberFormatOptions`		Number format for values in tooltips, labels, the data table, the summary, and axis ticks (ticks use fixed fraction digits).
`formatValue`	`(value: number) => string`		Custom value text; overrides valueFormat everywhere except axis ticks.
`series`	`readonly ScatterChartSeries[]`		Required. Series: { id, label, points: { x: number; y: number; size?: number; label?: string }[], color?: 1-8 }. Ids are unique and non-empty. Points with a non-finite x or y are skipped. Any point with a size makes the chart a bubble chart.
`xAxis`	`ScatterChartAxis`		X axis title, fixed domain (min < max), approximate tick count (2-20), and zero inclusion (default false). The title also names x in point labels, tooltips, and the table (default “X axis”).
`yAxis`	`ScatterChartAxis`		Y axis title, fixed domain, tick count, and zero inclusion (default false). The title also names y (default “Y axis”).
`sizeLabel`	`string`	`'Size'`	Name of the size dimension in bubble labels, tooltips, and the table.
`sizeRange`	`readonly [number, number]`	`'4,24'`	Bubble radius in CSS px for the smallest and largest size (each 1-100, min <= max). Area is proportional to size.
`xFormat`	`NumberFormatOptions`		Number format of x values (ticks, labels, tooltips, table, summary). Default: valueFormat.
`zoom`	`ChartZoomMode`	`'none'`	Zoom and pan along x or both axes: a Zoom toolbar (Zoom in, Zoom out, Reset zoom), +/= and - and 0 keys on a focused point, Ctrl/Cmd + wheel, drag to pan a zoomed chart, Shift + drag to select a range. Turning it off resets the window.
`legend`	`ChartLegendMode`	`'auto'`	auto: legend when there is more than one series. Entries are toggle buttons.
`dataTable`	`ChartTableMode`	`'toggle'`	Data table fallback with the exact data: behind a Show data table button (built on first open), always visible, visually hidden (screen readers only), or none.
`tooltip`	`boolean`	`true`	Tooltip on pointer hover and keyboard focus.
`patterns`	`boolean`	`false`	Texture fills (and dash patterns for lines) so marks never differ by color alone (always on in forced colors).
`height`	`number`	`'300'`	Plot height in CSS px (integer 120-2000); the width follows the container.
`crosshair`	`boolean`	`false`	Crosshair lines (vertical and horizontal, aria-hidden) through the hovered or focused point.
`locale`	`string`	`'en-US'`	Number and message locale.
`direction`	`Direction`	`'ltr'`	rtl mirrors the x axis, puts the value axis on the right, and swaps ArrowLeft/ArrowRight.

Two-way bindings

Model	Type	Change output	Description
`[(hiddenSeries)]`	`readonly string[]`	`(hiddenSeriesChange)`	Ids of series hidden initially; update() replaces the hidden set.
`[(zoomRange)]`	`ChartZoomRange \| null`	`(zoomRangeChange)`	Visible x window { from, to } in data units; null shows everything. Clamped to the data (minimum span 1/50 of the extent). Applied without an aui-zoom event; use with zoom enabled.
`[(zoomRangeY)]`	`ChartZoomRange \| null`	`(zoomRangeYChange)`	Visible y window with zoom: “xy” (ignored otherwise); null shows everything.

Outputs

Output	Payload	Description
`(seriesToggled)`	`ChartSeriesToggleDetail`	The user toggled a legend entry (pointer or keyboard). Not emitted for update() or setSeriesVisible(). Re-emits `aui-series-toggle`.
`(zoomed)`	`ChartZoomDetail`	The user changed the visible window (toolbar, keys, Ctrl/Cmd + wheel, drag pan, Shift + drag selection). x and y are null when that axis shows everything (y is always null with zoom: “x”). Not emitted for the zoom range options or when the window does not change. Re-emits `aui-zoom`.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`setSeriesVisible(id: string, visible: boolean): void`	Show or hide a series programmatically; emits no event.