Column

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.

 <div controller={PageController}>
  <Svg style="height: 350px; border: 1px dashed #ddd">
    <Chart
      margin="20 20 120 50"
      axes={{
        x: (
          <CategoryAxis labelRotation={-90} labelDy="0.4em" labelAnchor="end" />
        ),
        y: <NumericAxis vertical snapToTicks={1} />,
      }}
    >
      <Rectangle fill="white" />
      <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>
</div> 
 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,
      })),
    );
  }
} 
 interface Point {
  city: string;
  value: number;
}

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

const m = createModel<Model>(); 
 import { Svg, Rectangle } from "cx/svg";
import { Chart, NumericAxis, CategoryAxis, Gridlines, Column } from "cx/charts";
import { createModel } from "cx/data";
import { Controller, Repeater, expr, format } from "cx/ui";
import { enableTooltips } from "cx/widgets";
enableTooltips(); 

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.