Building Interactive 3D Bar Charts in Oracle APEX Using Plotly.js

March 04, 2026

Introduction

Data visualization plays a crucial role in modern applications. While Oracle APEX provides powerful built-in charting capabilities, sometimes developers need more advanced visualizations such as 3D charts.

In this blog, we will learn how to build an interactive 3D Bar Chart in Oracle APEX using the Plotly.js JavaScript library. This approach allows developers to create rich, dynamic visualizations directly inside APEX pages.

Prerequisites

Before starting, ensure you have:

Oracle APEX environment
Knowledge of APEX page development
Internet access to load the Plotly.js JavaScript library
Basic knowledge of JavaScript and client-side scripting

Step by Step Approaches:

Step 1: Create a New Page in Oracle APEX

Open Oracle APEX App Builder
Navigate to your application
Click Create Page
Choose Blank Page
Provide a page name

Example:


Page Name: 3D View Bar Chart

Once the page is created, open it in the Page Designer.

Step 2: Create a Static Content Region
Next, create a region where the chart will be rendered.
Steps:
In Page Designer
Click Create Region
Select Static Content
Give the region a title
Example:
Title: 3D Bar Chart
In the Source section of the region, add the following HTML:
<div id="bar3d"></div>
This container will hold the 3D chart.

Step 3: Add Plotly.js Library
Plotly.js is required to render the 3D visualization.
Go to the Page → JavaScript → File URLs section and add:
https://cdn.plot.ly/plotly-latest.min.js
This loads the Plotly library when the page loads.


Step 4: Add JavaScript Code
Next, add the JavaScript that generates the 3D bar chart.
Navigate to:
Page → JavaScript → Execute when Page Loads
Add the following code:
function makeBar(x, y, z0, z1, width, depth, color) {
  let x0 = x - width/2, x1 = x + width/2;
  let y0 = y - depth/2, y1 = y + depth/2;
  
  return {
    type: 'mesh3d',
    x: [x0, x1, x1, x0, x0, x1, x1, x0],
    y: [y0, y0, y1, y1, y0, y0, y1, y1],
    z: [z0, z0, z0, z0, z1, z1, z1, z1],
    i: [0,0,0,1,1,2,4,5,6,4,2,3],
    j: [1,2,3,5,6,3,5,6,7,0,6,7],
    k: [2,3,1,6,7,0,7,4,5,1,7,4],
    opacity: 0.9,
    color: color,
    flatshading: true
  };
}

let bars = [
  makeBar(1,1,0,23,0.5,0.5,'gold'),
  makeBar(2,1,0,48,0.5,0.5,'red'),
  makeBar(3,1,0,35,0.5,0.5,'deepskyblue'),
  makeBar(4,1,0,67,0.5,0.5,'seagreen')
];

let layout = {
  scene: {
    xaxis:{title:'Category'},
    yaxis:{title:'Group'},
    zaxis:{title:'Value'}
  },
  margin: {l:0,r:0,b:0,t:30}
};

Plotly.newPlot('bar3d', bars, layout, {responsive: true});

document.getElementById('bar3d').style.height = "500px";
document.getElementById('bar3d').style.width = "100%";

Plotly.Plots.resize(document.getElementById('bar3d'));



Step 5: Run the Application
Save the page and run the application.
You will now see an interactive 3D bar chart rendered inside your Oracle APEX page.
Users can:
Rotate the chart 
Zoom in/out
Explore the data interactively
















Understanding the Code
makeBar Function
This function dynamically generates a 3D bar using Plotly mesh3d geometry.
bars Array
Defines multiple bars with different heights and colors.
Example:
makeBar(1,1,0,23)
Where:
1 → Category
1 → Group
23 → Value (bar height)
Layout Configuration
Defines axis titles:
Category → X axis
Group → Y axis
Value → Z axis

Benefits of Using Plotly with Oracle APEX
Using Plotly.js with Oracle APEX provides several advantages:
Interactive 3D visualizations
Rich chart customization
Lightweight integration with JavaScript
Works with dynamic data sources
Enhances user experience
Conclusion
In this blog, we explored how to create an interactive 3D bar chart in Oracle APEX using Plotly.js. 
By combining Oracle APEX with external JavaScript visualization libraries, developers can build powerful and visually engaging dashboards.
This approach can be extended further to:
Dynamic charts using SQL data
Interactive dashboards
Real-time analytics visualization