UI Components
Gantt Chart

Gantt Chart

Interactive timeline with infinite scroll, zoom, and live tracking. Displays time-bounded items on horizontal lanes, with drag-to-scroll and pinch-to-zoom for navigating across time ranges.

Category: timeline · Maturity: stable

Installation

npx @plexus/cli add gantt

Usage

import { GanttChart } from '@plexus/ui'
 
function MissionTimeline({ tasks }) {
  return (
    <GanttChart
      items={tasks}
      lanes={[
        { key: 'comms', label: 'Communications' },
        { key: 'propulsion', label: 'Propulsion' },
        { key: 'payload', label: 'Payload' },
      ]}
      liveTracking
      zoomRange={[1, 3600]}
      width={1200}
      height={400}
    />
  )
}

Performance

SpecValue
Max data points1,000+ items
Target FPS60
Typical memory~40 MB
RendererWebGPU (WebGL2 fallback)

Aerospace Use Cases

  • Ground station schedules — Visualize satellite pass windows, antenna assignments, and communication slots
  • Mission planning — Lay out mission phases, maneuvers, and subsystem activation timelines
  • Test sequencing — Track parallel test procedures across multiple stations with start/end times and dependencies

Related Components