Calculated Chart Height

Charts with a CategoryAxis can dynamically adjust their height based on the number of categories. This is done by binding the categoryCount output property and using computable to calculate the Svg height.

Use the slider to add more items and observe how the chart grows to accommodate them.

 <div controller={PageController}>
  <Slider
    value={{ bind: m.itemCount.toString(), debounce: 100 }}
    minValue={1}
    maxValue={50}
    step={1}
    style="width: 200px; margin-bottom: 16px"
    help={<Text value={m.itemCount} />}
  />
  <Svg
    style={{
      width: "500px",
      height: computable(m.categoryCount, (count) => (count ?? 1) * 40 + 60),
      border: "1px dashed #ddd",
    }}
  >
    <Chart
      margin="20 20 40 100"
      axes={{
        y: <CategoryAxis vertical inverted categoryCount={m.categoryCount} />,
        x: <NumericAxis minLabelTickSize={1} />,
      }}
    >
      <Rectangle fill="white" />
      <Gridlines />
      <Repeater
        records={m.points}
        recordAlias="$point"
        sortField="count"
        sortDirection="DESC"
      >
        <Bar
          colorIndex={6}
          x={{ bind: "$point.count" }}
          y={{ bind: "$point.name" }}
          size={0.5}
        />
      </Repeater>
    </Chart>
  </Svg>
</div> 
 class PageController extends Controller {
  onInit() {
    this.store.init(m.itemCount, 5);
    this.addComputable(m.points, [m.itemCount], (itemCount) => {
      let names: Record<string, number> = {};
      for (let i = 0; i < itemCount; i++) {
        let name = categories[Math.floor(Math.random() * categories.length)];
        names[name] = 1 + (names[name] ?? 0);
      }
      return Object.keys(names).map((name) => ({ name, count: names[name] }));
    });
  }
} 
 interface Point {
  name: string;
  count: number;
}

interface Model {
  itemCount: number;
  categoryCount: number;
  points: Point[];
}

const m = createModel<Model>(); 
 import { Svg, Rectangle } from "cx/svg";
import { Chart, CategoryAxis, NumericAxis, Gridlines, Bar } from "cx/charts";
import { createModel } from "cx/data";
import { Controller, Text, computable } from "cx/ui";
import { Slider, Repeater } from "cx/widgets"; 

How It Works

The CategoryAxis outputs the number of categories via the categoryCount binding
A computable calculates the Svg height: (count) => count * 40 + 60
The chart automatically resizes as categories are added or removed

Configuration

Property	Type	Description
`categoryCount`	`binding`	Output binding for the number of categories on the axis.