Line Chart for Angular

import { AuiLineChart } from '@absoluteui/angular/line-chart';

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

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

Example

import { Component } from '@angular/core';
import { AuiLineChart } from '@absoluteui/angular/line-chart';
import type { ChartSeries } from '@absoluteui/components/line-chart';

@Component({
  selector: 'app-revenue',
  imports: [AuiLineChart],
  template: `<aui-line-chart label="Revenue" [x]="months" [series]="series" (seriesToggled)="hidden = $event.hidden"></aui-line-chart>`,
})
export class RevenueComponent {
  readonly months = ['Jan', 'Feb', 'Mar'];
  readonly series: ChartSeries[] = [{ id: 'rev', label: 'Revenue', values: [120, 135, 150] }];
  hidden: string[] = [];
}

`<aui-line-chart>`

Class AuiLineChart; template reference #ref="auiLineChart".

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.
`x`	`readonly LineChartXValue[]`		Required. Shared x values, one per point: strings (category axis), numbers (linear axis), or instants (time axis). Numbers and instants must be ascending.
`series`	`readonly ChartSeries[]`		Required. Series: { id, label, values: (number \| null)[], color?: 1-8 }. values has exactly one entry per x value; null, NaN, and infinities are gaps.
`area`	`boolean`	`false`	Fill the area between each line and the zero baseline (includes zero in the domain).
`xType`	`LineChartXType`		Axis type. Default: inferred from the first x value.
`xAxis`	`LineChartAxis`		X axis title and approximate tick count (2-20).
`yAxis`	`LineChartYAxis`		Y axis title, tick count, fixed domain, and zero inclusion (default true with area).
`formatX`	`(value: LineChartXValue, index: number) => string`		Custom x text for tooltips, labels, the table, and the summary.
`timeFormat`	`Omit<DateTimeFormatOptions, "timeZone">`		Date format of time x values. Default: chosen from the data resolution (year, month, day, minute, second).
`zoom`	`boolean`	`false`	Zoom and pan along x: a Zoom toolbar (Zoom in, Zoom out, Reset zoom), +/= and - and 0 keys on a focused point, arrow keys past the window edge pan, 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 (pie charts: always).
`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`	Dash patterns and texture fills so series never differ by color alone. Off by default (plain colors); always on in forced colors. Turn it on when series are told apart by color alone (grouped or stacked series, multi-slice pies) and no labels carry the distinction (WCAG 1.4.1).
`height`	`number`	`'300'`	Plot height in CSS px (integer 120-2000); the width follows the container.
`markers`	`LineChartMarkers`	`'auto'`	Point markers: auto when points are at least 12 px apart; focus shows only the hovered or focused point. Isolated points always show a marker.
`crosshair`	`boolean`	`false`	Vertical crosshair line (aria-hidden) at the hovered or focused x value.
`locale`	`string`	`'en-US'`	Number, date, and message locale.
`timezone`	`string`	`'UTC'`	IANA timezone for time axes, tooltips, labels, and the table.
`direction`	`Direction`	`'ltr'`	rtl mirrors the category/x axis, the value axis side, and Left/Right arrow keys.

Two-way bindings

Model	Type	Change output	Description
`[(hiddenSeries)]`	`readonly string[]`	`(hiddenSeriesChange)`	Ids of series (or slices) hidden initially; update() replaces the hidden set.
`[(zoomRange)]`	`ChartZoomRange \| null`	`(zoomRangeChange)`	Visible x window { from, to } in data units (category index, number, or epoch ms for time axes); null shows everything. Clamped to the data and to at least two points. Applied without an aui-zoom event; use with zoom: true (the toolbar and keys need it).

Outputs

Output	Payload	Description
`(seriesToggled)`	`LineChartSeriesToggleDetail`	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 is null when showing everything. Not emitted for the zoomRange option 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 (slice) programmatically; emits no event.