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.