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

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

Prerequisites

Dependencies

The 3D Circular 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/34.1.29/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/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/34.1.29/dist/ej2.min.js" type="text/javascript"></script>

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

The index.html file contains the chart container and loads index.js. The index.js file initializes the 3D Circular Chart with sample data.

The Syncfusion CDN scripts provide the ej.charts.CircularChart3D class. The sample displays browser market-share data as a 3D Pie chart, applies a tilt angle, adds a title, and renders the chart in the #element container.

The main configuration options are:

  • series - Defines the chart data and maps the data fields using xName and yName.
  • tilt - Sets the tilt angle of the 3D chart.
  • title - Sets the chart title.

Finally, circularChart.appendTo('#element') renders the chart in the <div id="element"> container.

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

var circularchart = new ej.charts.CircularChart3D({
    series: [
        {
            dataSource: [
                { x: 'Chrome', y: 62.92 },
                { x: 'Internet Explorer', y: 6.12 },
                { x: 'Opera', y: 3.15 },
                { x: 'Edge', y: 5.5 },
                { x: 'Safari', y: 19.97 },
                { x: 'Others', y: 2.34 }
            ],
            xName: 'x',
            yName: 'y'
        }
    ],
    tilt: -45,
    title: 'Browser Market Shares in November 2023'
}, '#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.2.2/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 Circular Chart control displaying the browser-market-share sample data as a 3D Pie series with a title.

Output

The 3D Circular Chart shows 6 browser vendors rendered as a 3D Pie series. The title “Browser Market Shares in November 2023” appears above the chart.

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').
  • Only an empty circular chart is rendered. Confirm that the series array is configured with at least a dataSource, xName, and yName, as shown in the example.