Getting Started with Syncfusion® JavaScript (ES5) Sparkline Control

22 Jul 20266 minutes to read

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

Prerequisites

Dependencies

The Sparkline control ships as part of the @syncfusion/ej2-charts package. The following minimum dependencies are required.

|-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-svg-base

Quick Setup

Step 1: Create the folder and files

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

Step 2: Add Syncfusion® CDN resources

Include the following JavaScript references in the <head> section of the index.html file.

Scripts:

<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>

Alternatively, load all Syncfusion components using 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® Sparkline control

The index.html file references a separate index.js file that contains the Sparkline initialization. This keeps the markup and script logic separated, which is the recommended pattern for Syncfusion JavaScript (ES5) applications.

The global scripts added in the previous step register the ej.charts.Sparkline class in the ej namespace. The index.js file creates a Sparkline instance with sample data and renders it inside the #element container declared in index.html.

//Initialize Sparkline component
var sparklineInstance = new ej.charts.Sparkline({
    height: '100px',
    width: '50%',
    dataSource: [
            { x: 0, xval: '2005', yval: 20090440 },
            { x: 1, xval: '2006', yval: 20264080 },
            { x: 2, xval: '2007', yval: 20434180 },
            { x: 3, xval: '2008', yval: 21007310 },
            { x: 4, xval: '2009', yval: 21262640 },
            { x: 5, xval: '2010', yval: 21515750 },
            { x: 6, xval: '2011', yval: 21766710 },
            { x: 7, xval: '2012', yval: 22015580 },
            { x: 8, xval: '2013', yval: 22262500 },
            { x: 9, xval: '2014', yval: 22507620 },
        ],
    // Assign the dataSource values to series of Sparkline 'xName and yName'
    xName: 'xval', yName: 'yval',
    // Assign the 'area' as type of Sparkline
    type:'Area'
});
//Render initialized Sparkline
sparklineInstance.appendTo("#element");
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Sparkline UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-charts/styles/material.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" style="margin-top: 15%;">
            <div id="element" align="center"></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>

The new ej.charts.Sparkline({...}) call creates the Sparkline control. The configuration object accepts options such as the following:

  • dataSource: Specifies the collection of values or objects displayed by the Sparkline.
  • type: Specifies the Sparkline type, such as Line, Column, WinLoss, Pie, or Area.
  • height: Specifies the height of the Sparkline.
  • width: Specifies the width of the Sparkline.

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

Step 4: Open the application in a browser

Open quickstart/index.html through a local web server.

If the VS Code Live Server extension is installed, right-click index.html in the Explorer and select Open with Live Server. Then, open the URL generated by Live Server, such as http://127.0.0.1:5500/.

The browser displays the Syncfusion Sparkline control with the configured sample data.

Output

After completing the previous steps, the application displays a Sparkline representing the supplied data.

Syncfusion Sparkline Quick Start Output

Troubleshooting

  • The page is blank: Open the page through a local web server, such as the VS Code Live Server extension, instead of opening the HTML file directly.
  • ej is not defined: Make sure the Syncfusion global scripts are loaded before index.js.
  • ej.charts.Sparkline is not a constructor: Verify that ej2-charts.min.js or the combined ej2.min.js bundle is loaded successfully.
  • The Sparkline container is empty: Confirm that the element ID in index.html matches the selector passed to appendTo('#element').
  • The data is not displayed correctly: When binding an object collection, verify that xName and yName match the corresponding property names in the data source.