Syncfusion AI Assistant

How can I help you?

ES5 getting started with EJ2 JavaScript 3D Circular Chart control

19 Feb 20268 minutes to read

This section explains the steps required to create a simple 3D Circular Chart and demonstrates the basic usage of the 3D Circular Chart control.

Dependencies

Below is the list of minimum dependencies required to use the 3D Circular Chart.

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

Setup for local environment

Follow these steps to set up your local environment.

Step 1: Create a root folder myapp for your application.

Step 2: Create myapp/resources folder to store local scripts and styles.

Step 3: Create myapp/index.js and myapp/index.html files for initializing the Syncfusion Essential JS 2 3D Circular Chart control.

Adding Syncfusion resources

The Essential JS 2 3D Circular Chart control can be initialized in either of the following ways:

Using local script.
Using CDN link for script.

Using local script

You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.

After installing the Essential JS 2 product build, you can copy the chart and its dependencies scripts and style file into the resources/scripts and resources/styles folder.

The following shows the path to the 3D Circular Chart script and style files.

Syntax:

Dependency script: **(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{DEPENDENCY_PACKAGE_NAME}/dist/global/{DEPENDENCY_PACKAGE_NAME}.min.js

Script: **(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Example:

Dependency script: C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/32.1.19/Web (Essential JS 2)/JavaScript/ej2-base/dist/global/ej2-base.min.js

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/32.1.19/Web (Essential JS 2)/JavaScript/ej2-charts/dist/global/ej2-charts.min.js

After copying the files, reference the chart scripts from index.html. The following HTML shows the minimal chart dependencies.


<!DOCTYPE html>
  <html xmlns="https://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 3D Circular Chart</title>

            <!-- Essential JS 2 3D Circular Chart dependent scripts -->
            <script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-svg-base.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 3D Circular Chart global script -->
            <script src="resources/scripts/ej2-charts.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Using CDN link for script

Using CDN link, you can directly refer the chart control’s script into the index.html.

Refer the chart’s CDN links as below.

Syntax:

Script: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Example:

Script: https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js

Use the following CDN links.

<!DOCTYPE html>
  <html xmlns="https://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 3D Circular Chart</title>
            <!-- Essential JS 2 Chart's global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Adding 3D Circular Chart control

Now you can add the 3D Circular Chart control to the application. To get started, add a div element for the 3D Circular Chart control in index.html. Then reference the index.js file in index.html.

<!DOCTYPE html>
  <html xmlns="https://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 3D Circular Chart</title>
            <!-- Essential JS 2 Chart's global script (includes necessary dependencies) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
       </head>
       <body>
           <!-- Add the HTML <div> element for 3D Circular Chart  -->
             <div id="element"></div>
             <script src="index.js" type="text/javascript"></script>
       </body>
  </html>

Place the following 3D Circular Chart initialization code in index.js.

var circularchart = new ej.charts.CircularChart3D();
circularchart.appendTo('#element');

Pie Series

By default, the pie series will be rendered when assigning the JSON data to the series using the dataSource property. Map the field names in the JSON data to the xName and yName properties of the series.

index.js
index.html
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',
            dataLabel: {
                visible: true,
                name: 'x',
                position: 'Outside',
                font: {
                    fontWeight: '600'
                },
                connectorStyle: { length: '40px' }
            },
        }
    ],
    tilt: -45,
    title: 'Browser Market Shares in November 2023',
    legendSettings: {
        visible: true,
        position: 'Right'
    }
}, '#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/33.1.44/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>

Search docs

Ask Syncfusion AI Assistant