# Bar

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

The `Bar` component renders individual horizontal bars. Unlike `BarGraph` which takes data arrays, `Bar` is used with `Repeater` for more control over each bar.

Use `height` and `offset` to position multiple series side by side. Hover over bars to see tooltips.

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

enableTooltips();

interface Point {
  category: string;
  v1: number;
  v2: number;
}

interface Model {
  data: Point[];
  $point: Point;
  v1Active: boolean;
  v2Active: boolean;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.data, [
      { category: "Product A", v1: 120, v2: 80 },
      { category: "Product B", v1: 90, v2: 150 },
      { category: "Product C", v1: 180, v2: 100 },
      { category: "Product D", v1: 60, v2: 130 },
    ]);
    this.store.set(m.v1Active, true);
    this.store.set(m.v2Active, true);
  }
}

export default (
  <LegendScope controller={PageController}>
    <Legend />
    <Svg style="height: 280px;">
      <Chart
        margin="20 20 30 100"
        axes={{
          x: <NumericAxis snapToTicks={0} />,
          y: <CategoryAxis vertical />,
        }}
      >
        <Gridlines />
        <Repeater records={m.data} recordAlias="$point">
          <Bar
            colorIndex={0}
            name="2023"
            height={0.3}
            offset={-0.15}
            x={m.$point.v1}
            y={m.$point.category}
            tooltip={format(m.$point.v1, "n;0")}
            active={m.v1Active}
          />
          <Bar
            colorIndex={5}
            name="2024"
            height={0.3}
            offset={0.15}
            x={m.$point.v2}
            y={m.$point.category}
            tooltip={format(m.$point.v2, "n;0")}
            active={m.v2Active}
          />
        </Repeater>
      </Chart>
    </Svg>
  </LegendScope>
);

```

## Configuration

| Property       | Type      | Description                                                        |
| -------------- | --------- | ------------------------------------------------------------------ |
| `x`            | `number`  | Bar value (length).                                                |
| `x0`           | `number`  | Bar start value for range bars. Default is `0`.                    |
| `y`            | `string`  | Category value.                                                    |
| `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.      |
| `height`       | `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.                                    |
| `tooltip`      | `object`  | Tooltip configuration. Use `tpl` for template strings.             |