# HBars

> Horizontal comparison bars.

Source: https://ui.jcsoftdev.com/docs/components/h-bars

Horizontal comparison bars. The visual grid is `aria-hidden`; an `sr-only`
table exposes name plus each series value as real text.

## Import

```ts
import { HBars } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/hbars`.

## Usage

```tsx
<HBars
  variant="stacked"
  scaleMax={20}
  description="Cortes y barbas por barbero esta semana"
  nameHeader="Barbero"
  series={[
      { id: "cortes", label: "Cortes" },
      { id: "barbas", label: "Barbas" },
    ]}
  rows={[
      { id: "diego", name: "Diego Quispe", values: [12, 6] },
      { id: "mateo", name: "Mateo Flores", values: [9, 4] },
      { id: "camila", name: "Camila Rojas", values: [7, 3] },
      { id: "andres", name: "Andrés Paredes", values: [3, 1], tone: "danger" },
    ]}
  ticks={ticks}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rows` * | `HBarRow[]` |  |  |
| `series` * | `HBarSeriesTuple` |  |  |
| `scaleMax` * | `number` |  | Domain value that maps to 100% of the bar width. |
| `ticks` | `HBarTick[]` |  | Ticks of the bottom axis; the whole row is omitted when not passed. |
| `threshold` | `number` |  | Threshold line, in the same scale as `scaleMax`. |
| `variant` | `"stacked" \| "paired"` | `"stacked"` | "stacked" (default): one fill per row split between series by `flex`. "paired": each series draws its own independent fill so two metrics on the same scale can be compared. |
| `description` * | `string` |  | Accessible table caption exposing the same numbers as the visual grid. |
| `nameHeader` * | `string` |  | Header of the name column in the accessible table. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/containers-hbars--default)
- [Paired](/storybook/?path=/story/containers-hbars--paired)
- [With Threshold](/storybook/?path=/story/containers-hbars--with-threshold)
- [Single Series Without Ticks](/storybook/?path=/story/containers-hbars--single-series-without-ticks)

## Source

`packages/ui/src/containers/hbars/hbars.tsx`