Bar1DChart#

The Bar1DChart component renders a one-dimensional bar chart for comparing numerical values across discrete categories. Each bar represents a single category with its corresponding value, making it ideal for simple horizontal or vertical bar comparisons.

Usage#

1<Chart
2  padding={0}
3  frame={{ height: 400 }}
4>
5  <Bar1DChart
6    marks={[
7      { category: "Gadgets", value: 3800 },
8      { category: "Gizmos", value: 4400 },
9      { category: "Widgets", value: 6500 },
10    ]}
11  />
12</Chart>

Props#

labelOnYAxis?: boolean#

If set to true, category labels will be displayed on the Y-axis and bars will be laid out horizontally. Defaults to false, where labels appear on the X-axis and bars are rendered vertically.

marks: Array<object> (required)#

An array of data points defining each bar. Each mark includes:

• category: string The category label for the bar.

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

• Additional optional ChartMarkProps: Use ChartMarkProps to further style or annotate the bars, including:

  • foregroundStyle
  • opacity
  • symbol
  • annotation
  • offset
  • zIndex, etc.

Example#

1const data = [
2  { type: "Gadgets", profit: 3800 },
3  { type: "Gizmos", profit: 4400 },
4  { type: "Widgets", profit: 6500 },
5]
6
7function Example() {
8  return <NavigationStack>
9    <VStack
10      navigationTitle={"Bar1DChart"}
11      navigationBarTitleDisplayMode={"inline"}
12    >
13      <Chart
14        padding={0}
15        frame={{ height: 400 }}
16      >
17        <Bar1DChart
18          marks={data.map(item => ({
19            category: item.type,
20            value: item.profit,
21          }))}
22        />
23      </Chart>
24    </VStack>
25  </NavigationStack>
26}

Run the Chart#

1async function run() {
2  await Navigation.present({
3    element: <Example />
4  })
5
6  Script.exit()
7}
8
9run()

Use Cases#

Bar1DChart is best suited for:

• Comparing discrete values across categories
• Displaying ranked items or sorted values
• Visualizing simple datasets in a clear and minimal layout