RangeBarStyle

Configures a Range Bar Styled Column.

A Range Bar shows where a row's value sits inside a per-row (or column-wide) numeric range. The range endpoints (Min / Max) are resolved per row — they can be hard-coded numbers, the value of another column on the same row, or a column-wide aggregate (Col-Min, Col-Max, Col-Avg, Col-Median).

Common scenarios: - Stock price relative to its 52-week low / 52-week high - Today's value relative to bid / ask quotes - Forecast within an upper / lower confidence interval - Measured value within an SLA [lowerBound, upperBound]

Visually the cell renders as a thin track between Min and Max, with a marker at the cell value. An optional Reference value renders as a second marker (e.g. previous close, target, midpoint).

Background bands (CellRanges) are drawn behind the track using the same conventions as Bullet Chart, and are useful for qualitative scales such as poor / acceptable / good (or red / amber / green SLA bands).

TypeScript
export interface RangeBarStyle extends
Extends

NumericStyledColumn

Properties

PropertyTypeDescriptionDefault
BackColorstringBackground colour for the chart area when no CellRanges are supplied.
CellTextPropertiesBarStyleCellTextPropertiesOptional cell-text overlay configuration.
MarkerBarStyleMarkerVisual style of the cell-value marker.{ Shape: 'Diamond', Color: 'var(--ab-color-accent)', Size: 8 }
MaxRangeBarBoundUpper bound of the track for each row.
MinRangeBarBoundLower bound of the track for each row.
Orientation'Horizontal' | 'Vertical'Orientation of the range bar.'Horizontal'
OutOfRangeRangeBarOutOfRangePropertiesBehaviour when the cell value falls outside [Min, Max], plus the optional marker colour override used by Mode: 'Clamp'.
ReferenceRangeBarReferencePropertiesOptional reference value (e.g. previous close, target, midpoint) drawn as a second marker on the track, together with its marker styling. Leave unset to draw only the cell-value marker.
ToolTipTextCellTextOptionsTooltip content — same tokens ('CellValue', 'PercentageValue') as Percent Bar / Bullet Chart.
TrackRangeBarTrackPropertiesVisual properties of the track (the line representing the [Min, Max] interval).

Property Details

BackColor

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

TypeScript
BackColor?: string;
Property Value

string

CellTextProperties

Optional cell-text overlay configuration.

TypeScript
CellTextProperties?: BarStyleCellTextProperties;
Property Value

BarStyleCellTextProperties

Marker

Visual style of the cell-value marker.

TypeScript
Marker?: BarStyleMarker;
Default Value

{ Shape: 'Diamond', Color: 'var(--ab-color-accent)', Size: 8 }

Property Value

BarStyleMarker

Max

Upper bound of the track for each row.

See Min for the supported value forms.

TypeScript
Max: RangeBarBound;
Property Value

RangeBarBound

Min

Lower bound of the track for each row.

Can be: - number — a fixed lower bound shared by every row - string — a column id; the row's value in that column is used - 'Col-Min' | 'Col-Max' | 'Col-Avg' | 'Col-Median' — a column-wide aggregate computed across the visible rows

TypeScript
Min: RangeBarBound;
Property Value

RangeBarBound

Orientation

Orientation of the range bar.

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

'Horizontal'

Property Value

'Horizontal' | 'Vertical'

OutOfRange

Behaviour when the cell value falls outside [Min, Max], plus the optional marker colour override used by Mode: 'Clamp'.

Defaults to { Mode: 'Clamp' } when omitted.

TypeScript
OutOfRange?: RangeBarOutOfRangeProperties;
Property Value

RangeBarOutOfRangeProperties

Reference

Optional reference value (e.g. previous close, target, midpoint) drawn as a second marker on the track, together with its marker styling. Leave unset to draw only the cell-value marker.

TypeScript
Reference?: RangeBarReferenceProperties;
Property Value

RangeBarReferenceProperties

ToolTipText

Tooltip content — same tokens ('CellValue', 'PercentageValue') as Percent Bar / Bullet Chart.

TypeScript
ToolTipText?: CellTextOptions;
Property Value

CellTextOptions

Track

Visual properties of the track (the line representing the [Min, Max] interval).

TypeScript
Track?: RangeBarTrackProperties;
Property Value

RangeBarTrackProperties