Proportion bar

Preview

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

Usage

Split one whole into its parts, such as positive, negative and neutral news, a portfolio by market or GPU hours by team. Parts take the chart's category hues in order; parts that read as a direction take tone: up and down use the trend colors, and flat the quiet neutral mark. The legend names each part with its share, its value or both.

• Don't use ProportionBar for values that don't add up to a whole. Rank them with BarList.
• Don't split a bar into more parts than a reader can tell apart, about six. Fold the small ones into one part, such as Other.
• Don't use ProportionBar for one value against its limit. Use Meter.

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

Anatomy

div(role=group, aria-label) → bar (aria-hidden): segment per part above zero; ul legend → li: swatch (aria-hidden) + name + value

Keyboard and accessibility

ProportionBar is a named group holding a list of text: each entry reads its part's name and value. The bar is decoration, so parts never rely on color alone. With legendHidden, the legend stays for assistive technology.

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 { ProportionBar } from '@surflane/ui'

<ProportionBar
  label='News sentiment, 25 articles'
  show='both'
  segments={[
    { id: 'positive', label: 'Positive', value: 12, tone: 'up' },
    { id: 'negative', label: 'Negative', value: 5, tone: 'down' },
    { id: 'neutral', label: 'Neutral', value: 8, tone: 'flat' },
  ]}
/>

Key API

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

Related tokens