Calculated Height
Use computed value to calculate the height of the chart based on the number of categories.
<Svg
style={{
width: "600px",
height: computable("$page.categoryCount", (count) => (count ?? 1) * 50 + 60),
}}
>
<Chart
offset="20 -20 -40 120"
axes={{
y: {
type: CategoryAxis,
vertical: true,
inverted: true,
categoryCount: bind("$page.categoryCount"),
},
x: {
type: NumericAxis,
minLabelTickSize: 1,
},
}}
>
<Repeater records-bind="$page.points" recordAlias="$point" sortField="count" sortDirection="DESC">
<Bar colorIndex={6} x-bind="$point.count" y-bind="$point.name" size={0.5} />
</Repeater>
<Gridlines />
</Chart>
</Svg>