Bullet

Alpha Component

Bullet is an alpha component and may undergo breaking changes. See Alpha Components for more information.

Basic Usage

import { Bullet } from '@adobe/react-spectrum-charts/alpha';

<Chart data={data}>
  <Bullet
    dimension="category"
    metric="current"
    target="goal"
  />
</Chart>

Props

name	type	default	description
color	string	'categorical-100'	The key in the data that is used as the color facet, or a color value.
dimension	string	'category'	Data field that the metric is trended against (x-axis for horizontal orientation).
direction	'row' | 'column'	'column'	Specifies the direction the bars should be ordered (row/column).
labelPosition	'side' | 'top'	'top'	Specifies if the labels should be on top of the bullet chart or to the side. Side labels are not supported in row mode.
maxScaleValue	number	–	Maximum value for the scale. This value must be greater than zero.
metric	string	'value'	Key in the data that is used as the metric.
metricLabel	string	–	Key in the data that contains a pre-formatted label for the metric value. When provided, this formatted label will be displayed instead of applying numberFormat to the metric value.
metricAxis	boolean	false	Adds an axis that follows the max target in basic mode.
name	string	–	Sets the name of the component.
numberFormat	string	'standardNumber'	d3 number format specifier or shorthand ('currency', 'shortCurrency', 'shortNumber', 'standardNumber'). Sets the number format for the summary value. See d3-format.
scaleType	'normal' | 'fixed' | 'flexible'	'normal'	In normal mode the maximum scale value will be calculated using the maximum value of the metric and target data fields. In fixed mode the maximum scale value will be set as the maxScaleValue prop. In flexible mode the maximum scale value will be calculated using the maximum value of either the maxScaleValue prop or maximum value of the metric and target data fields.
showTarget	boolean	true	Flag to control whether the target line is shown.
showTargetValue	boolean	false	Flag to control whether the target value label is shown.
target	string	'target'	Key in the data for the target line value.
targetLabel	string	–	Key in the data that contains a pre-formatted label for the target value. When provided, this formatted label will be displayed instead of applying numberFormat to the target value.
thresholdBarColor	boolean	false	If true, the metric bar will be colored according to the thresholds.
thresholds	ThresholdBackground[]	–	Array of threshold definitions to be rendered as background bands on the bullet chart. Each threshold object supports: • thresholdMin (optional): The lower bound of the threshold • thresholdMax (optional): The upper bound of the threshold • fill: The fill color to use for the threshold background
track	boolean	false	Adds color regions that sit behind the bullet bar.

Custom Label Formatting

The metricLabel and targetLabel props allow you to provide pre-formatted labels in your data, giving you complete control over label formatting including custom units, localization, or annotations.

Example with Custom Labels

const data = [
  {
    category: 'Storage Used',
    current: 750,
    currentLabel: '750 GB',
    goal: 1000,
    goalLabel: '1 TB',
  },
  {
    category: 'API Requests',
    current: 850,
    currentLabel: '85K req/sec',
    goal: 1000,
    goalLabel: '100K req/sec',
  },
];

<Chart data={data}>
  <Bullet
    dimension="category"
    metric="current"
    metricLabel="currentLabel"
    target="goal"
    targetLabel="goalLabel"
  />
</Chart>

This is useful when you need:

• Custom units that aren't in standard number formats
• Localized formatting from external libraries
• Context-specific annotations
• Different formatting per data point

Thresholds

Thresholds create colored background regions to indicate performance zones:

const thresholds = [
  { thresholdMax: 600, fill: 'rgb(21, 164, 110)' }, // green
  { thresholdMin: 600, thresholdMax: 900, fill: 'rgb(249, 137, 23)' }, // orange
  { thresholdMin: 900, fill: 'rgb(234, 56, 41)' }, // red
];

<Chart data={data}>
  <Bullet
    dimension="category"
    metric="current"
    target="goal"
    thresholds={thresholds}
    thresholdBarColor={true}
  />
</Chart>

When thresholdBarColor is enabled, the bullet bar itself will be colored based on which threshold zone it falls into.