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:
valueKey
defines the numeric value represented by the bar.targetKey
defines the optional numeric value represented by the target line.valueName
andtargetName
configure display names, reflected in the Tooltip.scale.max
defines the maximum value of the graph. This an alias for the Axes Domain.colorRange
define the quantitantive categories of the scale. The optionalstop
key 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.