Diverging bar

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Draw a signed value from a center line, such as a sector's return against the market or an allocation's drift from its target: a rise grows toward the inline end and a fall toward the start. Give bars side by side one max so they share a scale. A rise and a fall take the trend colors, as Stat and Sparkline do; trend='neutral' draws both in the brand mark for a gap that is neither good nor bad. To rank several signed values, use BarList with diverging.

• Don't use DivergingBar for a value that can't fall below zero. Use Meter or BarList.
• Don't leave the value only in the bar. Write it beside the bar too, signed, such as +4.2%p.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

span(role=img, aria-label) → center line + fill toward the inline end (rise) or start (fall)

Keyboard and accessibility

DivergingBar is a named image and isn't in the Tab order. Its label states the value and what it is against, such as "Semiconductors, +4.2%p against the market". Right to left, a rise grows toward the left.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { DivergingBar } from '@surflane/ui'

<DivergingBar
  value={-2.8}
  max={4.2}
  label='Chemicals, -2.8%p against the market'
/>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens