Bar

import { Bar } from 'cx/charts';

The Bar component renders individual horizontal bars. Unlike BarGraph which takes data arrays, Bar is used with Repeater for more control over each bar.

Use height and offset to position multiple series side by side. Hover over bars to see tooltips.

 <div controller={PageController}>
  <Legend />
  <Svg style="height: 280px; border: 1px dashed #ddd">
    <Chart
      margin="20 20 30 100"
      axes={{
        x: <NumericAxis snapToTicks={0} />,
        y: <CategoryAxis vertical />,
      }}
    >
      <Rectangle fill="white" />
      <Gridlines />
      <Repeater records={m.data} recordAlias="$point">
        <Bar
          colorIndex={0}
          name="2023"
          height={0.3}
          offset={-0.15}
          x={m.$point.v1}
          y={m.$point.category}
          tooltip={format(m.$point.v1, "n;0")}
          active={m.v1Active}
        />
        <Bar
          colorIndex={5}
          name="2024"
          height={0.3}
          offset={0.15}
          x={m.$point.v2}
          y={m.$point.category}
          tooltip={format(m.$point.v2, "n;0")}
          active={m.v2Active}
        />
      </Repeater>
    </Chart>
  </Svg>
</div> 
 class PageController extends Controller {
  onInit() {
    this.store.set(m.data, [
      { category: "Product A", v1: 120, v2: 80 },
      { category: "Product B", v1: 90, v2: 150 },
      { category: "Product C", v1: 180, v2: 100 },
      { category: "Product D", v1: 60, v2: 130 },
    ]);
    this.store.set(m.v1Active, true);
    this.store.set(m.v2Active, true);
  }
} 
 interface Point {
  category: string;
  v1: number;
  v2: number;
}

interface Model {
  data: Point[];
  $point: Point;
  v1Active: boolean;
  v2Active: boolean;
}

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

2023

2024

Configuration

Property	Type	Description
`x`	`number`	Bar value (length).
`x0`	`number`	Bar start value for range bars. Default is `0`.
`y`	`string`	Category value.
`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.
`height`	`number`	Bar thickness 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 bars.
`borderRadius`	`number`	Corner radius for rounded bars.
`tooltip`	`object`	Tooltip configuration. Use `tpl` for template strings.