# ColumnGraph

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

The `ColumnGraph` component renders a series of vertical bars. Use with `CategoryAxis` on the X axis for category labels.

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

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

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

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.data, [
      { month: "Jan", q1: 42, q2: 38 },
      { month: "Feb", q1: 58, q2: 52 },
      { month: "Mar", q1: 65, q2: 71 },
      { month: "Apr", q1: 71, q2: 68 },
      { month: "May", q1: 85, q2: 79 },
      { month: "Jun", q1: 78, q2: 84 },
    ]);
    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 40 50"
        axes={{
          x: <CategoryAxis />,
          y: <NumericAxis vertical snapToTicks={1} />,
        }}
      >
        <Gridlines />
        <ColumnGraph
          name="Q1"
          data={m.data}
          colorIndex={0}
          xField="month"
          yField="q1"
          size={0.3}
          offset={-0.15}
          active={m.q1Active}
        />
        <ColumnGraph
          name="Q2"
          data={m.data}
          colorIndex={5}
          xField="month"
          yField="q2"
          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 category. Default is `"x"`.                       |
| `yField`       | `string`   | Field name for the column value (height). 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`   | Column width 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 columns.                                      |
| `borderRadius` | `number`   | Corner radius for rounded columns.                                   |
| `y0Field`      | `string`   | Field name for the column start value (for range columns).           |
| `selection`    | `object`   | Selection configuration for interactive columns.                     |