BulletChartStyle

Style used to display a Bullet Chart in a Styled Column.

A Bullet Chart shows three things in a single cell: 1. the actual cell value, as a horizontal bar (the "feature measure") 2. a target value, as a marker on the bar (the "comparative measure") 3. optional qualitative bands behind the bar (e.g. poor / ok / good), defined via the inherited CellRanges property

Note: Unlike PercentBarStyle.CellRanges (which colour the bar based on the cell value), BulletChartStyle.CellRanges colour the background bands and are drawn unconditionally to provide the qualitative scale.

TypeScript
export interface BulletChartStyle extends
Extends

NumericStyledColumn

Properties

PropertyTypeDescriptionDefault
BackColorstringBackground colour for the chart area when no CellRanges are supplied.
BarBulletChartBarPropertiesVisual properties of the actual (foreground) bar — colour and thickness.
CellTextPropertiesBarStyleCellTextPropertiesOptional cell-text overlay configuration.
FontCellFontStyleOptional cell-text styling (colour, weight, font, alignment, …) applied by the Bullet Chart renderer to the optional CellText overlay.
Orientation'Horizontal' | 'Vertical'Orientation of the chart.'Horizontal'
Origin'Auto' | 'Zero' | numberOrigin of the actual bar.'Auto'
TargetPropertiesBulletChartTargetPropertiesTarget value(s) rendered as marker(s) on the bar, plus the chart-level default marker style. Per-target overrides are possible via the object form.
ToolTipTextCellTextOptionsTooltip content - same tokens ('CellValue', 'PercentageValue') as Percent Bar.

Property Details

BackColor

Background colour for the chart area when no CellRanges are supplied.

TypeScript
BackColor?: string;
Property Value

string

Bar

Visual properties of the actual (foreground) bar — colour and thickness.

TypeScript
Bar?: BulletChartBarProperties;
Property Value

BulletChartBarProperties

CellTextProperties

Optional cell-text overlay configuration.

TypeScript
CellTextProperties?: BarStyleCellTextProperties;
Property Value

BarStyleCellTextProperties

Font

Optional cell-text styling (colour, weight, font, alignment, …) applied by the Bullet Chart renderer to the optional CellText overlay.

When set, this property "claims" the Font slice for the column: any Format Column matching this column has its Font properties stripped. When unset, Format Column Font properties inherit through normally.

TypeScript
Font?: CellFontStyle;
Property Value

CellFontStyle

Orientation

Orientation of the chart.

  • 'Horizontal' (default) - bands and bar run left-to-right; markers are vertical lines / shapes positioned along the x-axis. - 'Vertical' - bands and bar run bottom-to-top; markers are horizontal lines / shapes positioned along the y-axis.

Note: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). AG Grid row height is a per-grid setting (gridOptions.rowHeight or getRowHeight).

TypeScript
Orientation?: 'Horizontal' | 'Vertical';
Default Value

'Horizontal'

Property Value

'Horizontal' | 'Vertical'

Origin

Origin of the actual bar.

  • 'Auto' (default) - the bar grows from the left edge unless any cell value or range endpoint is negative, in which case it grows from 0 - 'Zero' - the bar always grows from 0 (centred axis); positive values extend right, negative values extend left - any number - the bar grows from that fixed origin
TypeScript
Origin?: 'Auto' | 'Zero' | number;
Default Value

'Auto'

Property Value

'Auto' | 'Zero' | number

TargetProperties

Target value(s) rendered as marker(s) on the bar, plus the chart-level default marker style. Per-target overrides are possible via the object form.

TypeScript
TargetProperties?: BulletChartTargetProperties;
Property Value

BulletChartTargetProperties

ToolTipText

Tooltip content - same tokens ('CellValue', 'PercentageValue') as Percent Bar.

TypeScript
ToolTipText?: CellTextOptions;
Property Value

CellTextOptions

PreviousBulletChartBarPropertiesNextBulletChartTarget