Getting Started with Syncfusion® JavaScript (ES5) 3D Chart Control

22 Jul 20266 minutes to read

Build your first Syncfusion JavaScript (ES5) application with a simple 3D Chart in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) 3D Chart from the CDN, initializes it with sample data, and renders an interactive Column chart with a title.

Prerequisites

Dependencies

The 3D Chart control ships as part of the @syncfusion/ej2-charts package. Below is the list of minimum dependencies required.

|-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base

Quick Setup

Step 1: Create Folder and HTML file

  • Create a folder named quickstart in your desired directory.
  • Inside the quickstart folder, create two new files: index.html and index.js.

Step 2: Add Syncfusion® CDN Resources

Include the following JavaScript links in the <head> section.

Scripts (JavaScript):

<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>

Or, to load all Syncfusion components in a single combined bundle:

<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>

Step 3: Add the Syncfusion® 3D Chart Control to the Application

The index.html file references a separate index.js file that contains the 3D Chart initialization. This keeps your markup and script logic cleanly separated, which is the recommended pattern for Syncfusion® JavaScript (ES5) apps.

The global scripts added in Step 2 register the ej.charts.Chart3D class on the ej namespace, so index.js does not import anything manually. The script then builds the 3D Chart with sample monthly sales data, applies a value-type of 'Category' to the horizontal axis, formats the vertical axis labels, sets a chart title, and renders the control into the #element container defined in index.html.

Key options used in the configuration object:

  • primaryXAxis.valueType — Axis data type. Set to 'Category' because the sample data uses month names.
  • primaryYAxis.labelFormat — Format string applied to the axis labels. The example uses '${value}K' to add a $ prefix and K suffix to each label, where {value} is a placeholder for the raw number.
  • series — Array of series to render. Each series has a dataSource, xName, yName, type (e.g. 'Column'), and an optional name used by the legend.
  • title — Text shown above the 3D Chart.

Finally, chart3D.appendTo('#element') renders the control into the <div id="element"> element declared in index.html.

Copy the snippets below into the matching files in your quickstart folder.

var chartData = [
      { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
      { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
      { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
      { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
      { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
      { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
var chart3D = new ej.charts.Chart3D({
    primaryXAxis: {
        valueType: 'Category'
    },
    primaryYAxis: {
        labelFormat: '${value}K'
    },
   series:[{
        dataSource: chartData,
        name:'Sales',
        xName: 'month',
        yName: 'sales',
        type: 'Column'
    }],
    title: 'Sales Analysis'
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Step 4: Open in Browser

Open quickstart/index.html through a local web server. With the VS Code Live Server extension installed, right-click index.html in the Explorer and choose Open with Live Server, then visit the URL it prints (for example, http://127.0.0.1:5500/). You should see the Syncfusion 3D Chart control displaying the sample sales data.

Output

The 3D Chart shows 12 months of sales data rendered as 3D columns. The title “Sales Analysis” appears above the chart.

Syncfusion 3D Chart Quick Start Output

Troubleshooting

  • The page is blank. Open the page through a local web server (for example, the VS Code Live Server extension) instead of double-clicking the file. Syncfusion charts require an http:// or https:// origin.
  • ej is not defined. Confirm that ej2-charts.min.js is loaded before your script. Place the <script> tag inside the <head> or just before your own <script src="index.js"> tag.
  • The container is empty. Make sure the id in your markup (#element) matches the selector passed to appendTo('#element').
  • The axis labels are missing the $/K prefix/suffix. Verify that primaryYAxis.labelFormat is set to '${value}K' (with the curly braces preserved).