ColumnGraph

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.

 <div controller={PageController}>
  <Legend />
  <Svg style="height: 300px; border: 1px dashed #ddd">
    <Chart
      margin="20 20 40 50"
      axes={{
        x: <CategoryAxis />,
        y: <NumericAxis vertical snapToTicks={1} />,
      }}
    >
      <Rectangle fill="white" />
      <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>
</div> 
 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);
  }
} 
 interface Model {
  data: { month: string; q1: number; q2: number }[];
  q1Active: boolean;
  q2Active: boolean;
}

const m = createModel<Model>(); 
 import { Svg, Rectangle } from "cx/svg";
import {
  Chart,
  NumericAxis,
  CategoryAxis,
  Gridlines,
  ColumnGraph,
  Legend,
} from "cx/charts";
import { createModel } from "cx/data";
import { Controller } from "cx/ui"; 

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.