BarChart#

The BarChart component renders a standard bar chart, enabling visual comparison of numeric values across different categories. Each bar corresponds to a label and represents its associated value through height (vertical layout) or length (horizontal layout).

Example Scenario#

This example displays the count of different toy shapes — Cube, Sphere, and Pyramid. The chart provides an optional toggle to switch between vertical and horizontal layouts using the labelOnYAxis property.

Usage#

1<Chart frame={{ height: 400 }}>
2  <BarChart
3    labelOnYAxis={false}
4    marks={[
5      { label: "Cube", value: 5 },
6      { label: "Sphere", value: 4 },
7      { label: "Pyramid", value: 4 },
8    ]}
9  />
10</Chart>

Props#

labelOnYAxis?: boolean#

• If true, labels will be displayed on the Y-axis, and bars will be rendered horizontally.
• If false (default), labels appear on the X-axis, and bars are rendered vertically.

marks: Array<object> (required)#

Each data point defines a bar and includes:

• label: string | Date The name or identifier for the category.

• value: number The numeric value represented by the bar.

• unit?: CalendarComponent (optional) Used when displaying time-based values.

• Optional ChartMarkProps Provides additional customization, such as:

  • foregroundStyle
  • opacity
  • cornerRadius
  • symbol
  • annotation
  • etc.

Example Code#

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

Use Cases#

The BarChart component is ideal for:

• Comparing values across discrete categories
• Displaying survey results, item counts, or rankings
• Switching between horizontal and vertical layouts with minimal configuration