Bar Chart for Angular

import { AuiBarChart } from '@absoluteui/angular/bar-chart';

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

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

Example

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

@Component({
  selector: 'app-orders',
  imports: [AuiBarChart],
  template: `<aui-bar-chart label="Orders by channel" [categories]="channels" [series]="series" layout="stacked"></aui-bar-chart>`,
})
export class OrdersComponent {
  readonly channels = ['Web', 'Store'];
  readonly series: ChartSeries[] = [{ id: 'orders', label: 'Orders', values: [420, 310] }];
}

<aui-bar-chart>

Class AuiBarChart; template reference #ref="auiBarChart".

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. Category labels, one per bar group (text only).
series	readonly ChartSeries[]		Required. Series: { id, label, values: (number | null)[], color?: 1-8 }, one value per category; null, NaN, and infinities leave a gap.
orientation	BarChartOrientation	'vertical'	vertical: columns; horizontal: bars along the inline axis with category labels beside the plot.
layout	BarChartLayout	'grouped'	grouped: side by side; stacked: summed per category (positives up from zero, negatives down).
categoryAxis	BarChartCategoryAxis		Category axis title.
valueAxis	BarChartValueAxis		Value axis title, fixed domain (bars are clipped to it), and approximate tick count (2-20). The automatic domain always includes zero.
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.
valueLabels	boolean	false	Print values at the bar ends (grouped) or inside segments that fit (stacked).
locale	string	'en-US'	Number, date, and message locale.
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.

Outputs

Output	Payload	Description
(seriesToggled)	BarChartSeriesToggleDetail	The user toggled a legend entry (pointer or keyboard). Not emitted for update() or setSeriesVisible(). Re-emits aui-series-toggle.

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.