Auto Width Columns

import { Column } from 'cx/charts';

When displaying multiple column series side by side, autoSize automatically calculates column widths and positions. Column positions are determined based on previously seen data, so series maintain consistent placement across categories.

 <div controller={PageController}>
  <Legend />
  <Svg style="height: 300px; border: 1px dashed #ddd">
    <Chart
      margin="20 20 40 50"
      axes={{
        x: <CategoryAxis uniform />,
        y: <NumericAxis vertical snapToTicks={1} />,
      }}
    >
      <Rectangle fill="white" />
      <Gridlines />
      <Repeater records={m.data} recordAlias="$point">
        <Column
          name="Actual"
          colorIndex={0}
          width={0.8}
          x={m.$point.month}
          y={m.$point.actual}
          autoSize
          tooltip={format(m.$point.actual, "n;0")}
          active={m.actualActive}
        />
        <Column
          name="Budget"
          colorIndex={5}
          width={0.8}
          x={m.$point.month}
          y={m.$point.budget}
          autoSize
          tooltip={format(m.$point.budget, "n;0")}
          active={m.budgetActive}
        />
        <Column
          name="Forecast"
          colorIndex={10}
          width={0.8}
          x={m.$point.month}
          y={m.$point.forecast}
          autoSize
          tooltip={format(m.$point.forecast, "n;0")}
          active={m.forecastActive}
        />
      </Repeater>
    </Chart>
  </Svg>
</div> 
 class PageController extends Controller {
  onInit() {
    this.store.set(
      m.data,
      months.map((month, i) => ({
        month,
        actual: Math.round(Math.random() * 50 + 30),
        budget: i < 9 ? Math.round(Math.random() * 50 + 30) : null,
        forecast: i < 6 ? Math.round(Math.random() * 50 + 30) : null,
      })),
    );
    this.store.set(m.actualActive, true);
    this.store.set(m.budgetActive, true);
    this.store.set(m.forecastActive, true);
  }
} 
 interface Point {
  month: string;
  actual: number;
  budget: number | null;
  forecast: number | null;
}

interface Model {
  data: Point[];
  $point: Point;
  actualActive: boolean;
  budgetActive: boolean;
  forecastActive: boolean;
}

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

Actual

Budget

Forecast

Configuration

Property	Type	Description
`autoSize`	`boolean`	Set to `true` to automatically calculate width and offset based on present data.
`uniform`	`boolean`	Set on `CategoryAxis` to ensure equal spacing regardless of data presence.
`width`	`number`	Maximum width as a fraction of available space. Default is `0.5`.