# BarChart

Grouped or stacked columns for comparing values across categories on a shared zero baseline.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, BarChart } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <BarChart label="Hours by team" categories={["Product", "Design", "Growth"]}
        series={[
          {id:"actual", label:"Actual", values:[38, 29, 46]},
          {id:"plan", label:"Plan", values:[32, 36, 40]}
        ]} />
    </FloodRoot>
  );
}
```

## Design notes

- Use layout stacked for additive series. Positive and negative values accumulate independently on either side of zero. A custom domain must contain the cumulative bounds.
- Use layout percent for nonnegative shares on a fixed 0–100% scale. The readout shows each share of the observed total and its raw value. A zero total leaves the column empty and shows raw zeros. Supply formatShare to localize percentages.
- Series names appear in the inspection readout. Set showLegend when the key needs to be visible before interaction.
- Pass up to four series in display order with one value per category. Put the primary series first to give it the accent fill. Comparison series use outline and dash styling as well as color.
- Grouped columns start at zero and reserve empty slots for missing observations. In stacks, zero and missing observations take no space and remain distinguishable in the readout. Use the same domain to compare separate charts.
- Explore exact values by hovering, tapping, or using arrow keys, Home and End. Supply formatValue and translated empty, missing and navigation labels for other locales.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `categories` | `readonly string[]` | `Required` |
| `layout` | `"grouped" \| "stacked" \| "percent"` | `—` |
| `series` | `readonly ChartSeries[]` | `Required` |
| `domain` | `readonly [number, number]` | `—` |
| `showLegend` | `boolean` | `—` |
| `formatValue` | `(value: number) => string` | `—` |
| `formatShare` | `(share: number) => string` | `—` |
| `emptyLabel` | `string` | `"No data"` |
| `missingLabel` | `string` | `"No value"` |
| `navigationLabel` | `string` | `"Use the arrow keys to explore categories, or Home and End to jump."` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "role" \| "aria-label">` | `Forwarded` |