Syncfusion AI Assistant

How can I help you?

Getting Started with Syncfusion® JavaScript (ES5) Accumulation Chart Control

23 May 20264 minutes to read

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

Ready to streamline your Syncfusion® JavaScript development? Discover the full potential of Syncfusion® JavaScript controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistant

Prerequisites

Quick Setup

Step 1: Create Folder and HTML file

  • Create a folder named quickstart in your desired directory
  • Inside the quickstart folder, create a new file named index.html

Step 2: Add Syncfusion® CDN Resources

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

Scripts (JavaScript):

https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js
https://cdn.syncfusion.com/ej2/33.2.3/ej2-data/dist/global/ej2-data.min.js
https://cdn.syncfusion.com/ej2/33.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js
https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js
https://cdn.syncfusion.com/ej2/33.2.3/ej2-charts/dist/global/ej2-charts.min.js

Step 3: Add Syncfusion® Accumulation Chart control to the application

Copy and paste the following complete code into your index.html file:

<!DOCTYPE html>
<html>
  <head>
    <title>Syncfusion Accumulation Chart - Quick Start</title>
    
    <!-- Scripts -->
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-data/dist/global/ej2-data.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-charts/dist/global/ej2-charts.min.js"></script>
  </head>
  
  <body>
    <h1>Syncfusion Accumulation Chart</h1>
    <div id="element"></div>
    
    <script>
      // Sample data
      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 }
      ];
      
      // Create Accumulation Chart
      var chart = new ej.charts.AccumulationChart({
        series: [
          {
            dataSource: chartData,
            xName: 'month',
            yName: 'sales',
            type: 'Pie'
          }
        ],
        title: 'Sales Data'
      });
      
      // Render Chart
      chart.appendTo('#element');
    </script>
  </body>
</html>

Step 4: Open in Browser

Open the quickstart/index.html file in your web browser. You should see the Syncfusion Accumulation Chart control displaying the sample data.

Output

The following screenshot shows the output of the Syncfusion Accumulation Chart quick start application:

Syncfusion Accumulation Chart Quick Start Output