ApexCharts
  • Products

    ApexCharts.js
    Modern, interactive charts for the web
    ApexGrid
    High-performance data grid for the web
    ApexMaps
    Maps and geographic data visualization
    ApexGantt
    Project planning with dependencies
    ApexTree
    Org charts and hierarchical diagrams
    ApexSankey
    Flow and relationship diagrams
    ApexStock
    Financial charts and indicators
    Chart Editor
    Visual chart builder, no code required

    By capability

    • JavaScript Data Grid
    • JavaScript Gantt Chart
    • JavaScript Sankey Diagram
    • JavaScript Org Chart
    • JavaScript Stock Chart
    • JavaScript Map Chart
  • Build something

    • ShowcaseFull applications built on several Apex products at once
    • RecipesHow to solve one concrete problem, with the wiring code

    Browse examples

    • All demosEvery gallery, across all seven products
    • Chart featuresWhat the charting library can do
    • Unit shapesPictorial charts drawn from real shapes
  • Docs
  • AI
  • Pricing
  • Learn

    • BlogReleases, research and engineering notes
    • What's newThe current version of every product, and its release notes
    • Loved by developersWhat people build and say
    • Embedded analyticsDashboards and reporting inside your product

    Company

    • SupportGet help from the team
    • LicensingWhat each plan permits
    • About us
  • Getting started
  • Basic Gantt
  • Data Parsing
  • Tasks & scheduling
  • Milestones
  • Baseline
  • Critical Path
  • Rollups
  • Split Tasks
  • Working Calendar
  • Project Boundary
  • Dependencies
  • Dependency Types
  • Dependency Arrows
  • Dependency Edit
  • Task list & columns
  • Task List Columns
  • Custom Columns
  • Extended Columns
  • WBS Column
  • Progress Ring Column
  • Interaction & editing
  • Selection
  • Task CRUD
  • Draw Tasks
  • Scroll to Task
  • Sorting & Filtering
  • Grouping
  • Events
  • Crosshair
  • Styling & theming
  • Custom Colors
  • Bar Labels
  • CSS Theming
  • Annotations
  • Export, platform & accessibility
  • Accessibility
  • Toolbar
  • Saving & Restoring State
  • Localization & RTL

ApexGantt Demos

Browse all ApexGantt sample demos. Click any thumbnail to see the live demo and source code.

FRAMEWORKS
Angular React Vue

Getting started

TaskMarchAprilDemolitionKitchenBathroomDisposal
Basic Gantt
{ } → tasksQ1Q2data.items[]row.labelrow.startmap(fn)
Data Parsing

Tasks & scheduling

Release planAprMayRoadmap reviewScope lockedBeta buildCode freezeGA launch
Milestones
Plan vs actualJanFebMarDesignFrontendBackendQA
Baseline
Critical pathMarAprMayDesignBuildBufferLaunch
Critical Path
RollupsMarAprMayDiscoveryDesignBuild
Rollups
SegmentsMarAprMayDesignBuildReview
Split Tasks
CalendarMTWTDevelopTestShip
Working Calendar
Project spanMarAprMayPhase 1Phase 2Phase 3startend
Project Boundary

Dependencies

TasksMarAprMayTask ATask BTask CTask D
Dependency Types
BuildMarAprMayPlanningSurveyFoundationsFraming
Dependency Arrows
Drag to linkWk1Wk2DesignDevelopDeploy
Dependency Edit

Task list & columns

TaskStartDurMarAprDesign03-035dBuild03-108dReview03-223d
Task List Columns
Task·%Status12Web serverACDoneFirewallBLIn progMigrationJKBlocked
Custom Columns
TaskPredTeamMarAprDesign—ACBuild1BL+2Ship2JK
Extended Columns
WBSTaskMarApr1Discovery1.1Interviews1.2Synthesis2Design
WBS Column
TaskDoneMarAprResearchPrototypeShip
Progress Ring Column

Interaction & editing

TaskMarAprDesignBuildReview
Selection
AddEditPlanBuildNew task
Task CRUD
Draw taskMarAprMayDesignBuildNew+ 6d
Draw Tasks
Jump to barNowLaterDesignBuildReview
Scroll to Task
Design1Task%MarAprDesign API92Design UI68Design QA41
Sorting & Filtering
Group: StatusMarAprIn progress2DesignBuildDone1Research
Grouping
EventsWk1Wk2Sprint ASprint Bresize ▸ +2dSprint C
Events
Hover dateMarAprMayDesignBuildQAApr 12
Crosshair

Styling & theming

Per-taskMarAprFrontendBackendInfraDesign
Custom Colors
TasksWk1Wk2APIAPI P0AuthAuth P1DocsDocs P2
Bar Labels
LightDesignBuildDarkDesignBuild
CSS Theming
MarkersMarAprMayBuildFreezeLaunchRelease
Annotations

Export, platform & accessibility

A11y · keysMarAprDesignBuildReviewTab←→↵
Accessibility
PhasePublish3DesignDevelopDeliver
Toolbar
Save viewRestoredPhase 1DesignBuild
Saving & Restoring State
المهامأبريلمارستصميمتطويرمراجعة
Localization & RTL