# BarGraph

```ts
import { BarGraph } from 'cx/charts';
```

The `BarGraph` component renders a series of horizontal bars. Use with `CategoryAxis` on the Y axis for category labels.

For multiple series, use `size` and `offset` to position bars side by side. Click legend entries to toggle series visibility.

```tsx
import { Svg, Rectangle } from "cx/svg";
import {
  Chart,
  NumericAxis,
  CategoryAxis,
  Gridlines,
  BarGraph,
  Legend,
  LegendScope,
} from "cx/charts";
import { createModel } from "cx/data";
import { Controller } from "cx/ui";

interface Model {
  data: { city: string; q1: number; q2: number }[];
  q1Active: boolean;
  q2Active: boolean;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.data, [
      { city: "New York", q1: 85, q2: 92 },
      { city: "London", q1: 72, q2: 78 },
      { city: "Paris", q1: 65, q2: 71 },
      { city: "Tokyo", q1: 90, q2: 88 },
      { city: "Sydney", q1: 58, q2: 64 },
    ]);
    this.store.set(m.q1Active, true);
    this.store.set(m.q2Active, true);
  }
}

export default (
  <LegendScope controller={PageController}>
    <Legend />
    <Svg style="height: 300px; ">
      <Chart
        margin="20 20 30 80"
        axes={{
          x: <NumericAxis snapToTicks={1} />,
          y: <CategoryAxis vertical />,
        }}
      >
        <Gridlines />
        <BarGraph
          name="Q1"
          data={m.data}
          colorIndex={0}
          xField="q1"
          yField="city"
          size={0.3}
          offset={-0.15}
          active={m.q1Active}
        />
        <BarGraph
          name="Q2"
          data={m.data}
          colorIndex={5}
          xField="q2"
          yField="city"
          size={0.3}
          offset={0.15}
          active={m.q2Active}
        />
      </Chart>
    </Svg>
  </LegendScope>
);

```

## Configuration

| Property       | Type       | Description                                                        |
| -------------- | ---------- | ------------------------------------------------------------------ |
| `data`         | `array`    | Array of data points.                                              |
| `xField`       | `string`   | Field name for the bar value (length). Default is `"x"`.           |
| `yField`       | `string`   | Field name for the category. Default is `"y"`.                     |
| `colorIndex`   | `number`   | Index of the color from the theme palette.                         |
| `colorMap`     | `string`   | Name of the color map for automatic color assignment.              |
| `name`         | `string`   | Series name for the legend.                                        |
| `active`       | `boolean`  | Binding to control visibility. Works with Legend interaction.      |
| `size`         | `number`   | Bar thickness as a fraction of available space. Default is `0.5`.  |
| `offset`       | `number`   | Offset for positioning multiple series. Default is `0`.            |
| `stacked`      | `boolean`  | Set to `true` to stack bars.                                       |
| `borderRadius` | `number`   | Corner radius for rounded bars.                                    |
| `x0Field`      | `string`   | Field name for the bar start value (for range bars).               |
| `selection`    | `object`   | Selection configuration for interactive bars.                      |