Bar (S2)

The Bar component in the S2 package supports nearly all props from the base Bar component plus S2-exclusive features: inline direct labels and Spectrum 2 styled visuals.

note

The S2 Bar component does not yet support Trendline as a child component.

import { Chart, Axis, Bar } from '@spectrum-charts/react-spectrum-charts-s2';

---

Bar direct labels (BarDirectLabel)

The BarDirectLabel component is an S2-exclusive child of Bar. It places a numeric label outside the tip of each bar, reading directly from the metric value. Labels are positioned automatically based on orientation — above or below the bar for vertical charts, left or right for horizontal charts — and flip to the opposite side for negative values.

<Chart data={data}>
  <Axis position="bottom" baseline title="Browser" />
  <Axis position="left" grid title="Downloads" />
  <Bar dimension="browser" metric="downloads">
    <BarDirectLabel />
  </Bar>
</Chart>

Horizontal bars

The same component works for horizontal bar charts. Labels appear to the right of positive bars and to the left of negative bars.

<Chart data={data}>
  <Axis position="left" baseline title="Browser" />
  <Axis position="bottom" grid title="Downloads" />
  <Bar dimension="browser" metric="downloads" orientation="horizontal">
    <BarDirectLabel />
  </Bar>
</Chart>

BarDirectLabel props

BarDirectLabel is intentionally minimal for v1 — additional options (custom format, prefix, etc.) will be added in future releases.

name	type	default	description
No props in v1. The label text and placement are derived automatically from the parent Bar's metric, dimension, and orientation.

---

Bar props (S2)

name	type	default	description
children	ChartTooltip | ChartPopover | BarAnnotation | BarDirectLabel	–	Optional child components for tooltips, popovers, annotations, and inline direct labels.
color	string | {value: string}	'categorical-100'	Key in the data used to map each series to a color, or a fixed color value object.
dimension	string	'category'	Key in the data used for the categorical axis.
metric	string	'value'	Key in the data used for the metric axis value.
name	string	'bar0'	Name of the bar component. Useful when referencing a specific bar programmatically.
onClick	(datum: Datum) => void	–	Callback fired when a bar is clicked.
orientation	'vertical' | 'horizontal'	'vertical'	Controls whether bars extend vertically (default) or horizontally.
type	'stacked' | 'dodged'	'stacked'	Controls whether multi-series bars are stacked on top of each other or placed side by side.