Bar Graph

Overview

BarGraph shows a single horizontal bar split into colored segments. Use it to break a total down into its parts, such as controls status.

Add a BarGraphSegment for each part. Widths come from each segment’s value as a share of the total (value / sum of all values), so you pass raw numbers rather than percentages. Children that aren’t a BarGraphSegment are ignored.

Segments are focusable and show a Tooltip on hover and focus, so they work by keyboard alone. Each segment is exposed individually to screen readers, with its tooltip as the accessible name — there’s no single label for the bar as a whole, so screen reader users read it one segment at a time. Write each tooltip to describe its segment on its own.

Usage

Import the component:

import { BarGraph, BarGraphSegment } from "@eqtylab/equality";

Basic usage with required properties:

<BarGraph>
  <BarGraphSegment
    value={12}
    color="var(--color-brand-green)"
    label="Done"
    tooltip="12 tasks done"
  />
  <BarGraphSegment
    value={3}
    color="var(--color-brand-yellow)"
    label="In progress"
    tooltip="3 tasks in progress"
  />
  <BarGraphSegment
    value={28}
    color="var(--color-greyscale-600)"
    label="Remaining"
    tooltip="28 tasks remaining"
  />
</BarGraph>

Variants

Default

There’s no visible legend by default — each segment’s accessible name comes from its tooltip. Hover or focus a segment to reveal it.

Sizes

Use size to control the bar’s height. sm is a thin pill; the default md and lg are bolder and use rounded rectangles instead of a full pill. Note the small Failure segment, which is floored at 2px so it stays visible and focusable at every size.

Small

Medium (default)

Large

<BarGraph size="lg">{/* segments */}</BarGraph>

With visible labels

Set showLabels to render a legend beneath the bar. Note that this legend will not be read aloud by screen readers, content inside it should also be exposed in the section tooltip.

Rich tooltip content

The tooltip prop accepts a string or any ReactNode, so segments can show formatted content.

Props

BarGraph

BarGraphSegment