Bullet (S2)

Pre-alpha component

Bullet is a pre-alpha component — it has no finalized Spectrum 2 design yet and is imported from the pre-alpha subpath.

The Bullet component displays bullet charts, used to show a metric's progress against a target, optionally with threshold bands or a track for additional context.

import { Chart } from '@spectrum-charts/react-spectrum-charts-s2';
import { Bullet } from '@spectrum-charts/react-spectrum-charts-s2/pre-alpha';

<Chart data={data}>
  <Bullet metric="currentAmount" dimension="graphLabel" target="target" />
</Chart>

---

Tooltips

Bullet supports ChartInspect like other S2 chart mark components. Unlike the base package, S2 does not have a ChartTooltip component — use ChartInspect instead.

<Bullet metric="currentAmount" dimension="graphLabel" target="target">
  <ChartInspect>
    {(datum) => (
      <div>
        <div>{datum.graphLabel}</div>
        <div>Current: ${datum.currentAmount}</div>
        <div>Target: ${datum.target}</div>
      </div>
    )}
  </ChartInspect>
</Bullet>

---

Thresholds and tracks

The thresholds prop draws background bands behind the metric bar, useful for indicating performance zones (e.g. red/yellow/green). Set thresholdBarColor to also color the metric bar itself based on which threshold band its value falls in.

<Bullet
  metric="currentAmount"
  dimension="graphLabel"
  target="target"
  thresholds={[
    { thresholdMax: 120, fill: 'rgb(234, 56, 41)' },
    { thresholdMin: 120, thresholdMax: 235, fill: 'rgb(249, 137, 23)' },
    { thresholdMin: 235, fill: 'rgb(21, 164, 110)' },
  ]}
  thresholdBarColor
/>

The track prop draws a flat background region behind the metric bar instead. thresholds and track are mutually exclusive — thresholds takes precedence when both are set.

---

Bullet props (S2)

name	type	default	description
children	ChartInspect	–	Optional child component for inspect panel content.
color	string	'blue-900'	The color of the metric bar. Accepts a CSS color value or a Spectrum color name.
dimension	string	'graphLabel'	Key in the data used as the row/column label for each bullet group.
direction	'row' | 'column'	'column'	Specifies the direction bullet groups are laid out in.
labelPosition	'side' | 'top'	'top'	Specifies whether the dimension/value labels are shown above or to the side of the bullet. Side labels are not supported in row mode.
maxScaleValue	number	100	Maximum value for the scale when scaleType is 'fixed' or 'flexible'. Must be greater than zero.
metric	string	'currentAmount'	Key in the data used for the metric bar's value.
metricLabel	string	–	Key in the data containing a pre-formatted label for the metric value. When provided, this label is shown instead of the formatted metric value.
metricAxis	boolean	false	Adds an axis that follows the shared scale, in column direction.
name	string	–	Name of the bullet component. Useful when referencing the bullet marks programmatically.
numberFormat	string	–	A d3-format specifier for the metric and target values.
scaleType	'normal' | 'fixed' | 'flexible'	'normal'	'normal' derives the scale max from the data. 'fixed' pins it to maxScaleValue. 'flexible' uses maxScaleValue until the data overtakes it.
showTarget	boolean	true	Controls whether the target line is shown.
showTargetValue	boolean	false	Controls whether the target value label is shown.
target	string	'target'	Key in the data used for the target line's value.
targetLabel	string	–	Key in the data containing a pre-formatted label for the target value. When provided, this label is shown instead of the formatted target value.
thresholdBarColor	boolean	false	When true, colors the metric bar based on which threshold band its value falls in.
thresholds	{thresholdMin?: number, thresholdMax?: number, fill?: string}[]	–	Background bands rendered behind the metric bar. An undefined thresholdMin/thresholdMax extends the band to the start/end of the scale.
track	boolean	false	Draws a flat background region behind the metric bar. Ignored when thresholds is set.