BarGanttChart#

The BarGanttChart component visualizes time intervals across multiple categories, making it ideal for illustrating schedules, timelines, or task durations. It displays bars that span from a start to an end value on a continuous axis, grouped by labeled categories.

Usage#

1<Chart frame={{ height: 400 }}>
2  <BarGanttChart
3    labelOnYAxis
4    marks={[
5      { label: "Job 1", start: 0, end: 15 },
6      { label: "Job 2", start: 5, end: 25 },
7      ...
8    ]}
9  />
10</Chart>

Props#

labelOnYAxis?: boolean#

If true, the category labels will be displayed on the Y-axis, and bars will extend horizontally along the X-axis (typical Gantt chart layout). Default is false, which would render a vertical layout with labels on the X-axis.

marks: Array<object> (required)#

Defines the time intervals for each bar. Each object must include:

• label: string The category label associated with the time interval (e.g., task or job name).

• start: number The starting value (usually representing time or progress) of the bar.

• end: number The ending value of the bar. The bar will visually span from start to end.

Additional ChartMarkProps can also be provided for customization.

Example#

1const data = [
2  { job: "Job 1", start: 0, end: 15 },
3  { job: "Job 2", start: 5, end: 25 },
4  { job: "Job 1", start: 20, end: 35 },
5  { job: "Job 1", start: 40, end: 55 },
6  { job: "Job 2", start: 30, end: 60 },
7  { job: "Job 2", start: 30, end: 60 },
8]
9
10function Example() {
11  return <NavigationStack>
12    <VStack
13      navigationTitle={"BarGanttChart"}
14      navigationBarTitleDisplayMode={"inline"}
15    >
16      <Chart frame={{ height: 400 }}>
17        <BarGanttChart
18          labelOnYAxis
19          marks={data.map(item => ({
20            label: item.job,
21            start: item.start,
22            end: item.end,
23          }))}
24        />
25      </Chart>
26    </VStack>
27  </NavigationStack>
28}

Execution#

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

Use Cases#

BarGanttChart is ideal for:

• Project planning and task scheduling
• Visualizing task overlaps and durations
• Representing resource allocation over time