---
layout: "@demo/layouts/mdx-layout.astro"
heading: "Bar Graph"
description: "Single line segmented bar graph with segment tooltips"
source_url:
  html: https://equality.eqtylab.io/posts/bar-graph
  md: https://equality.eqtylab.io/posts/bar-graph.md
generator: Astro Markdown Export
version: 1.0.0
---


import {
  BarGraphDemo,
  BarGraphSizeSmDemo,
  BarGraphSizeMdDemo,
  BarGraphSizeLgDemo,
  BarGraphWithLabelsDemo,
  BarGraphRichTooltipDemo,
} from "@demo/components/demo/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](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:

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

Basic usage with required properties:

```tsx
<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.

<BarGraphDemo client:only="react" />

### 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

<BarGraphSizeSmDemo client:only="react" />

#### Medium (default)

<BarGraphSizeMdDemo client:only="react" />

#### Large

<BarGraphSizeLgDemo client:only="react" />

```tsx
<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.

<BarGraphWithLabelsDemo client:only="react" />

### Rich tooltip content

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

<BarGraphRichTooltipDemo client:only="react" />

## Props

### `BarGraph`

| Name         | Description                                                              | Type              | Default | Required |
| ------------ | ------------------------------------------------------------------------ | ----------------- | ------- | -------- |
| `size`       | Bar height. `md` and `lg` use rounded rectangles instead of a full pill. | `sm`, `md`, `lg`  | `md`    | ❌       |
| `showLabels` | Render a visible legend (color swatch + label) beneath the bar.          | `boolean`         | `false` | ❌       |
| `children`   | One or more segments to render.                                          | `BarGraphSegment` | —       | ✅       |

### `BarGraphSegment`

| Name      | Description                                                                                                                                            | Type                  | Default | Required |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ------- | -------- |
| `value`   | Sets the segment's width as a share of the total (`value / sum of all values`). Every segment is floored at 2px so small and zero values stay visible. | `number`              | —       | ✅       |
| `color`   | Any valid CSS color (e.g. a token like `var(--color-brand-green)` or `#10b981`).                                                                       | `string`              | —       | ✅       |
| `label`   | Visible legend label, shown when `showLabels` is set. Not announced to screen readers.                                                                 | `string`              | —       | ✅       |
| `tooltip` | Tooltip content shown on hover and keyboard focus; also the segment's accessible name, so it must describe the segment on its own.                     | `string \| ReactNode` | —       | ✅       |