Documentation

Report Edit

Calculated Height

Use computed value to calculate the height of the chart based on the number of categories.

 
5
South AmericaEuropeNorth AmericaAustralia012
   <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>
Copied!Cx Fiddle