# Column

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

The `Column` component renders individual vertical bars. Unlike `ColumnGraph` which takes data arrays, `Column` is used with `Repeater` for more control over each column—such as individual colors based on value.

In this example, each column's color is computed from its value using `expr`.

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

enableTooltips();

interface Point {
  city: string;
  value: number;
}

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

const m = createModel<Model>();

const cities = [
  "Tokyo",
  "Delhi",
  "Shanghai",
  "São Paulo",
  "Mexico City",
  "Cairo",
  "Mumbai",
  "Beijing",
  "Dhaka",
  "Osaka",
  "New York",
  "Karachi",
  "Buenos Aires",
  "Istanbul",
  "Kolkata",
];

class PageController extends Controller {
  onInit() {
    this.store.set(
      m.data,
      cities.map((city, i) => ({
        city,
        value: 10 + ((i + 1) / 15) * 40 + (Math.random() - 0.5) * 10,
      })),
    );
  }
}

export default (
  <LegendScope controller={PageController}>
    <Svg style="height: 350px;">
      <Chart
        margin="20 20 120 50"
        axes={{
          x: (
            <CategoryAxis
              labelRotation={-90}
              labelDy="0.4em"
              labelAnchor="end"
            />
          ),
          y: <NumericAxis vertical snapToTicks={1} />,
        }}
      >
        <Gridlines />
        <Repeater records={m.data} recordAlias="$point">
          <Column
            colorIndex={expr(
              m.$point.value,
              (v) => 15 - Math.round((v * 6) / 50),
            )}
            width={0.7}
            x={m.$point.city}
            y={m.$point.value}
            tooltip={format(m.$point.value, "n;1")}
          />
        </Repeater>
      </Chart>
    </Svg>
  </LegendScope>
);

```

## Configuration

| Property       | Type      | Description                                                          |
| -------------- | --------- | -------------------------------------------------------------------- |
| `x`            | `string`  | Category value.                                                      |
| `y`            | `number`  | Column value (height).                                               |
| `y0`           | `number`  | Column start value for range columns. Default is `0`.                |
| `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.        |
| `width`        | `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.                                   |
| `tooltip`      | `object`  | Tooltip configuration.                                               |