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
  • Layout & direction
  • Top to Bottom View
  • Bottom to Top View
  • Left to Right View
  • Right to Left View
  • Dynamic View Change
  • Radial Layout
  • Radial Dendrogram
  • Node cards & styling
  • Default Cards
  • Minimal
  • Rich Node Card
  • Org Chart with Metrics
  • Per Node Options
  • Per Node Size
  • Auto Node Height
  • Expandable Cards
  • Count Badges
  • Node Wrappers
  • Custom Font Options
  • Edges & labels
  • Edge Color Mode
  • Active Path Flow
  • External Labels
  • External Labels (Left-to-Right)
  • Interaction
  • Expand/Collapse Nodes
  • Batch Expand & Collapse
  • Group Leaf Nodes
  • Collapse with Badges
  • Selection
  • Focus Mode
  • Semantic Zoom
  • Lazy Children
  • Command Palette
  • Motion & live data
  • Live Data Updates
  • Time Travel
  • Theming & platform
  • Dark Theme
  • CSS Theming
  • Accessibility
  • Localization & RTL

ApexTree Demos

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

FRAMEWORKS
Angular React Vue

Layout & direction

Top to Bottom View
Top to Bottom View
Bottom to Top View
Bottom to Top View
Left to Right View
Left to Right View
Right to Left View
Right to Left View
Dynamic View Change
Dynamic View Change
Radial Layout
Radial Layout
Radial Dendrogram
Radial Dendrogram

Node cards & styling

Default Cards
Default Cards
Minimal
Minimal
Rich Node Card
Rich Node Card
Org Chart with Metrics
Org Chart with Metrics
Per Node Options
Per Node Options
Per Node Size
Per Node Size
Auto Node Height
Auto Node Height
Expandable Cards
Expandable Cards
Count Badges
Count Badges
Node Wrappers
Node Wrappers
Custom Font Options
Custom Font Options

Edges & labels

Edge Color Mode
Edge Color Mode
Active Path Flow
Active Path Flow
External Labels
External Labels
External Labels (Left-to-Right)
External Labels (Left-to-Right)

Interaction

Expand/Collapse Nodes
Expand/Collapse Nodes
Batch Expand & Collapse
Batch Expand & Collapse
Group Leaf Nodes
Group Leaf Nodes
Collapse with Badges
Collapse with Badges
Selection
Selection
Focus Mode
Focus Mode
Semantic Zoom
Semantic Zoom
Lazy Children
Lazy Children
Command Palette
Command Palette

Motion & live data

Live Data Updates
Live Data Updates
Time Travel
Time Travel

Theming & platform

Dark Theme
Dark Theme
CSS Theming
CSS Theming
Accessibility
Accessibility
Localization & RTL
Localization & RTL