Combo Chart for Angular

import { AuiComboChart } from '@absoluteui/angular/combo-chart';

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

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

Example

import { Component } from '@angular/core';
import { AuiComboChart } from '@absoluteui/angular/combo-chart';
import type { ComboChartSeries } from '@absoluteui/components/combo-chart';

@Component({
  selector: 'app-revenue-margin',
  imports: [AuiComboChart],
  template: `<aui-combo-chart label="Revenue and margin" [categories]="quarters" [series]="series" [zoom]="true" (seriesToggled)="hidden = $event.hidden"></aui-combo-chart>`,
})
export class RevenueMarginComponent {
  readonly quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
  readonly series: ComboChartSeries[] = [
    { id: 'rev', label: 'Revenue', type: 'bar', values: [120, 150, 170, 160] },
    { id: 'margin', label: 'Margin', type: 'line', axis: 'secondary', values: [0.32, 0.4, 0.38, 0.41] },
  ];
  hidden: string[] = [];
}

`<aui-combo-chart>`

Class AuiComboChart; template reference #ref="auiComboChart".

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.
`categories`	`readonly string[]`		Required. Shared categories (x axis), in order.
`series`	`readonly ComboChartSeries[]`		Required. Series: { id, label, values: (number \| null)[], type: ‘bar’ \| ‘line’ \| ‘area’, axis?: ‘primary’ \| ‘secondary’, color?: 1-8 }. values has exactly one entry per category; null, NaN, and infinities are gaps.
`stacked`	`boolean`	`false`	Stack the bar series per axis (positive and negative values stack separately); lines and areas are never stacked.
`categoryAxis`	`{ label?: string; }`		Category axis title (also the first table column header; default “Category”).
`primaryAxis`	`ComboChartValueAxis`		Primary (start-side) value axis: title, fixed domain, tick count (2-20), zero inclusion, and a number format for its values (default: valueFormat). Bars and areas always include zero.
`secondaryAxis`	`ComboChartValueAxis`		Secondary (end-side) value axis, shown when a visible series uses it. Tick labels only (no gridlines); its tick count follows the primary axis unless set. format defaults to valueFormat; formatValue overrides both axes.
`zoom`	`boolean`	`false`	Zoom and pan over categories: a Zoom toolbar (Zoom in, Zoom out, Reset zoom), +/= and - and 0 keys on a focused mark, 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'`	Legend of toggle buttons; auto and show both display it (also for a single series), hide removes it.
`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`	Vertical crosshair line (aria-hidden) on the hovered or focused category.
`locale`	`string`	`'en-US'`	Number and message locale.
`direction`	`Direction`	`'ltr'`	rtl mirrors the category axis, swaps the primary (right) and secondary (left) axis sides, 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 category index window { from, to }; null shows everything. Clamped to the data and to at least two categories. Applied without an aui-zoom event; use with zoom: true.

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 is a category index range, or null when showing everything. 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.