RectChart

The RectChart component renders a bar-like rectangular chart that visualizes value-based data associated with labels. It is similar in usage to BarChart and uses the same BarChartProps interface.


Example

1<RectChart
2  labelOnYAxis={false}
3  marks={[
4    { label: "Cube", value: 5 },
5    { label: "Sphere", value: 4 },
6    { label: "Pyramid", value: 4 },
7  ]}
8/>

Props

labelOnYAxis (optional)

  • Type: boolean
  • Default: false
  • Description: If true, the labels will appear along the Y-axis and the chart will display as horizontal bars. If false, labels are on the X-axis with vertical bars.

marks (required)

  • Type: Array<{ label: string | Date; value: number; unit?: CalendarComponent } & ChartMarkProps>
  • Description: Defines each data point to render as a rectangle in the chart.

mark object fields:

  • label: The category label shown on the axis (e.g., “Cube”).
  • value: The numeric value determining the height or width of the rectangle.
  • unit: (Optional) A calendar unit used for time-based data.

You may also use optional visual properties inherited from ChartMarkProps, such as:

  • foregroundStyle
  • cornerRadius
  • annotation
  • opacity

Full Example

1const toysData = [
2  { type: "Cube", count: 5 },
3  { type: "Sphere", count: 4 },
4  { type: "Pyramid", count: 4 },
5]
6
7<RectChart
8  labelOnYAxis={true}
9  marks={toysData.map(toy => ({
10    label: toy.type,
11    value: toy.count,
12  }))}
13/>

Use Cases

  • Comparing categorical quantities visually.
  • Displaying metrics in dashboards or reports.
  • Alternative to traditional bar charts with customizable rendering.