---
title: Interactive Organizational Charts in Oracle APEX Using D3.js
description: Create an organisation chart with D3.js in Oracle APEX. Learn more about the integration and advantages of this technology.
---

[HAY IT Consulting Blog](https://hayitc.de/blog)

# [Interactive Organizational Charts in Oracle APEX Using D3.js](https://hayitc.de/blog/organization-chart-using-d3.js-in-oracle-apex)

 Geschrieben von [HAY IT Consulting](https://hayitc.de/blog/author/hay-it-consulting) | 07.12.2025 18:01:54

Oracle APEX (Application Express) provides a wide range of visualization options, but one thing it lacks out of the box is **interactive organizational charts**. That’s where the **D3.js JavaScript library** comes in.

With D3.js, you can build highly interactive, vector-based charts with zoom and pan functionality — perfect for complex hierarchical data like org charts. In this post, I’ll walk you through how to integrate D3.js into Oracle APEX, generate the necessary JSON payload using PL/SQL, and deliver the data to your JavaScript chart.

### Step 1: Include D3.js in Your APEX App

To get started, you need to include D3.js in your APEX application. You can do this via the application’s shared components:

1. **Navigate to**: Shared Components > Static Application Files (or Workspace Files)
2. **Upload** the D3.js library (or use a CDN link)
   
     1. The Files to be downloaded from here:
        
        [https://d3js.org/d3.v7.min.js](https://d3js.org/d3.v7.min.js)
        
        [https://cdn.jsdelivr.net/npm/d3-org-chart@3.0.1](https://cdn.jsdelivr.net/npm/d3-org-chart@3.0.1)
        
        
        [https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js](https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js)
     2. Save [d3-org-chart@3.0.1 with .js extension => ](mailto:d3-org-chart@3.0.1)[d3-org-chart@3.0.](https://cdn.jsdelivr.net/npm/d3-org-chart@3.0.1)[1.js](mailto:d3-org-chart@3.0.1)
3. Then go to your page and add the following in the **"File URLs"** under the **JavaScript** section of the Page Attributes:

<https://26736669.fs1.hubspotusercontent-eu1.net/hubfs/26736669/image-png-3.png>

### Step 2: Create an Application Process to Generate JSON

To render the org chart, D3.js needs a hierarchical JSON structure. This data should come from your Oracle database. You can generate this via an **Application Process** in APEX that returns JSON.

<https://26736669.fs1.hubspotusercontent-eu1.net/hubfs/26736669/image-png-Dec-07-2025-08-14-34-2307-PM.png>

### Step 3: Build the D3 Org Chart in JavaScript

<https://26736669.fs1.hubspotusercontent-eu1.net/hubfs/26736669/image-png-Dec-07-2025-06-51-41-0678-PM.png>

 

function show\_org\_chart(){  
      
    apex.server.process(  
    'GET\_ORG\_CHART\_JSON',                           
    {x01: $v( "P1\_BUSINESS\_GROUP\_SEARCH\_LOV" )},  
    {  
     success: function (pData) {  
         
      const data = pData;  
      
       chart = new d3.OrgChart()  
      .nodeHeight((d) => 85 + 25)  
      .nodeWidth((d) => 220 + 2)  
      .childrenMargin((d) => 50)  
      .compactMarginBetween((d) => 35)  
      .compactMarginPair((d) => 30)  
      .neighbourMargin((a, b) => 20)  
      .onNodeClick(function(d) {  
               if (d.data.url != null) {  
                  window.open(d.data.url);  
               }      
            })  
      .nodeContent(function (d, i, arr, state) {  
        const color = '#2e85f396';  
        const imageDiffVert = 25 + 2;  
        return \`  
                <div style='width:${  
                  d.width  
                }px;height:${d.height}px;padding-top:${imageDiffVert - 2}px;padding-left:1px;padding-right:1px'>  
                        <div style="font-family: 'Inter', sans-serif;background-color:${color};  margin-left:-1px;width:${d.width - 2}px;height:${d.height - imageDiffVert}px;border-radius:10px;border: 1px solid #E4E2E9">  
                            <div style="display:flex;justify-content:flex-end;margin-top:5px;margin-right:8px">${  
                              d.data.org\_short\_key  
                            }</div>  
                            <div style="font-size:15px;color:#08011E;margin-left:20px;margin-top:10px">  ${  
                              d.data.name  
                            } </div>  
                        </div>  
                    </div>  
                            \`;  
      })  
      .container('.chart-container')  
      .data(data)  
      .layout('left').render().fit();  
      }  
    }  
  );      
}

### Step 4: Create Static Content Region

<https://26736669.fs1.hubspotusercontent-eu1.net/hubfs/26736669/image-png-4.png>

<div class="chart-container"></div>

### <https://26736669.fs1.hubspotusercontent-eu1.net/hubfs/26736669/image-png-Dec-07-2025-08-39-37-1305-PM.png>

### References

[https://stackblitz.com/edit/js-2ct1nt?file=index.html](https://stackblitz.com/edit/js-2ct1nt?file=index.html)

## Kommentar hinterlassen

 

[Vollständigen Beitrag anzeigen](https://hayitc.de/blog/organization-chart-using-d3.js-in-oracle-apex)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "HAY IT Consulting"
  },
  "dateModified" : "2025-12-09T08:46:41.769Z",
  "datePublished" : "2025-12-07T18:01:54Z",
  "headline" : "Interactive Organizational Charts in Oracle APEX Using D3.js",
  "image" : {
    "@type" : "ImageObject",
    "height" : 1024,
    "url" : "https://26736669.fs1.hubspotusercontent-eu1.net/hubfs/26736669/AI-Generated%20Media/Images/The%20image%20depicts%20a%20sleek%20modern%20organizational%20chart%20displayed%20on%20a%20digital%20interface%20created%20using%20D3js%20within%20the%20Oracle%20APEX%20platform%20The%20chart%20features%20a%20hierarchical%20structure%20with%20interconnected%20nodes%20each%20representing%20different%20team%20members%20o.jpeg",
    "width" : 1024
  },
  "mainEntityOfPage" : "https://hayitc.de/blog/organization-chart-using-d3.js-in-oracle-apex",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "HAY IT Consulting Blog"
  }
}
```