Bullet Chart for Angular

import { AuiBulletChart } from '@absoluteui/angular/bullet-chart';

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

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

Example

import { Component } from '@angular/core';
import { AuiBulletChart } from '@absoluteui/angular/bullet-chart';
import type { BulletMeasure } from '@absoluteui/components/bullet-chart';

@Component({
  selector: 'app-goals',
  imports: [AuiBulletChart],
  template: `<aui-bullet-chart label="Quarterly goals" [measures]="measures" [rangeLabels]="ranges"></aui-bullet-chart>`,
})
export class GoalsComponent {
  readonly ranges = ['Poor', 'Satisfactory', 'Good'];
  readonly measures: BulletMeasure[] = [{ id: 'rev', label: 'Revenue', value: 270, target: 250, ranges: [150, 225, 300] }];
}

<aui-bullet-chart>

Class AuiBulletChart; template reference #ref="auiBulletChart".

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). Must not be blank.
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 (measure count, each measure’s name, and how many are at or above target).
valueFormat	NumberFormatOptions		Number format for values and targets in names, the tooltip, 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.
measures	readonly BulletMeasure[]		Required. Rows: { id, label, value: number | null, target?: number, ranges?: number[] }. Ids are unique and non-empty; null, NaN, and infinities are a missing value; target is finite; ranges are up to three strictly ascending finite upper ends (the first range starts at the axis minimum).
rangeLabels	readonly string[]		Names of the qualitative ranges in the same order as ranges (up to three, for example [“Poor”, “Satisfactory”, “Good”]); read in each measure’s name, tooltip, and table. Default “Range 1”, “Range 2”, “Range 3”.
color	ChartColor	'1'	Palette slot of the measure bars.
valueAxis	ValueAxisInput		Fixed domain (max > min; marks are clamped to it) and approximate tick count (2-20). The automatic domain always includes zero and spans every value, target, and range end. label and includeZero are validated but not drawn or used.
legend	ChartLegendMode	'auto'	Shared chart configuration; a bullet chart never shows a legend (ranges are named in each row’s label).
dataTable	ChartTableMode	'toggle'	Data table fallback (Measure, Value, Target, Range): 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 (value, target, range).
patterns	boolean	false	Shared chart configuration; toggles the aui-chart–patterns host class. Bullet charts draw no textures (one measure color; ranges are neutral shades named in text).
height	number	'300'	Plot height in CSS px (integer 120-2000), divided evenly between rows; the width follows the container.
locale	string	'en-US'	Number and message locale.
direction	Direction	'ltr'	rtl mirrors the value axis, moves labels to the right, and swaps ArrowLeft/ArrowRight.

Two-way bindings

Model	Type	Change output	Description
[(hiddenSeries)]	readonly string[]	(hiddenSeriesChange)	Shared chart option; validated but has no effect (a bullet chart has no toggleable series).

Methods

Call them through a viewChild query or a template reference.

Method	Description
setSeriesVisible(id: string, visible: boolean): void	Shared chart method; re-renders but has no visible effect on a bullet chart. Emits no event.