A Bullet Series presents a single data point within a predefined range, commonly used to illustrate the relationship of a key value to a target or comparative values. It employs a horizontal or vertical bar and employs various visual cues for clarity.
Simple Bullet
To create a Bullet Series, use the bullet series type.
series: [
{
type: 'bullet',
valueKey: 'income',
valueName: 'Actual income',
targetKey: 'objective',
targetName: 'Target income',
scale: { max: 15000 },
colorRanges: [
{ color: '#FFB6C1' /* Light Pink */, stop: 8000 },
{ color: '#FFFACD' /* Light Yellow */, stop: 13000 },
{ color: '#B6FBB6' /* Light Green */ },
],
},
],
In this configuration:
valueKeydefines the numeric value represented by the bar.targetKeydefines the optional numeric value represented by the target line.valueNameandtargetNameconfigure display names, reflected in the Tooltip.scale.maxdefines the maximum value of the graph. This an alias for the Axes Domain.colorRangedefine the quantitantive categories of the scale. The optionalstopkey defaults toscale.max.
Bullet Series only works with positive numbers for both the value and target.
Horizontal Bullet
To create a Horizontal bullet Series, set direction: 'horizontal'.
series: [
{
type: 'bar',
direction: 'horizontal',
valueKey: 'income',
// ...
},
],
API Reference
Properties available on the AgBulletSeriesOptions interface.
Primary identifier for the series. This is provided as seriesId in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique id value.
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
Configuration for marker and series highlighting when a series or legend item is hovered over.
A human-readable description of the bar value. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.