Getting started with EJ2 TypeScript Sparkline control

31 Jul 20266 minutes to read

This document explains how to create a simple Sparkline and configure its basic features in TypeScript using the Essential JS 2 webpack quickstart seed repository.

This application uses the webpack.config.js configuration included in the quickstart repository. Ensure that Node.js is installed on your machine. For information about webpack and its features, refer to the webpack getting-started guide.

Prerequisites

Before you begin, ensure that the following software is installed:

  • Node.js
  • Visual Studio Code or another text editor
  • Git for cloning the quickstart repository
  • A modern web browser, such as Chrome, Edge, Firefox, or Safari

Dependencies

The Sparkline control is included in the @syncfusion/ej2-charts package. Below is the list of core and optional dependencies used by the package.

|-- @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: Open a terminal

Open the command prompt and navigate to the directory where you want to create the project.

  • On Windows, use Command Prompt or PowerShell.
  • On macOS or Linux, use Terminal.

Step 2: Clone the quickstart repository

Run the following command to clone the Syncfusion JavaScript quickstart project from GitHub:

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart

Step 3: Navigate to the project folder

After cloning the project, navigate to the ej2-quickstart directory:

cd ej2-quickstart

Step 4: Install the required packages

Syncfusion JavaScript packages are available in the npm registry. The quickstart application is preconfigured with the @syncfusion/ej2 package in package.json.

Run the following command to install the project dependencies:

npm install

The sample imports the Sparkline control from @syncfusion/ej2-charts, which is included through the preconfigured Syncfusion package. To use only the charts package in another project, install it with npm install @syncfusion/ej2-charts and keep all Syncfusion package versions aligned.

Step 5: Update the HTML template

Open the ej2-quickstart folder in Visual Studio Code or another text editor. Locate src/index.html, preserve any existing link and script elements generated by the seed project, and add a div element with the ID element inside the body element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Essential JS 2 Sparkline</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Syncfusion TypeScript Sparkline control" />
    <meta name="author" content="Syncfusion" />
    <!-- Preserve the existing head content from the seed template. -->
</head>
<body>
    <!-- Container in which the Sparkline is rendered. -->
    <div id="element"></div>
</body>
</html>

Step 6: Create the Sparkline with data

Locate src/app/app.ts. Import the Sparkline class, initialize it with a data source, and append it to the #element container. Providing data in the initial configuration ensures that the first run produces visible output.

The dataSource property accepts numeric values or objects. When using objects, set xName and yName to the corresponding field names in the data source.

import { Sparkline } from '@syncfusion/ej2-charts';

let sparkline: Sparkline = new Sparkline({
    height: '100px',
    width: '70%',
    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'
});
sparkline.appendTo("#element");

The sparkline.appendTo('#element') call renders the control in the element whose ID is element.

Step 7: Run the application

Run the following command from the project directory:

npm run start

The webpack development server compiles the project and opens it in the default browser. The application typically runs at http://localhost:4000. To stop the development server, press Ctrl+C in the terminal.

Output

After completing the quick setup, the application displays a Sparkline for the configured data.

Syncfusion Sparkline Quick Start Output

Troubleshooting

  • The page is blank: Confirm that npm install completed successfully and check the browser console and network panel for errors.
  • Cannot find module '@syncfusion/ej2-charts': Run npm install again, or install the package directly with npm install @syncfusion/ej2-charts.
  • The Sparkline is not displayed: Verify that the data source contains valid values and that the selector passed to appendTo('#element') matches <div id="element"></div>.
  • Only an empty SVG element is rendered: Add a valid dataSource and ensure that xName and yName match the fields in an object data source.
  • TypeScript errors occur after package installation: Ensure that all Syncfusion packages use compatible versions and remove node_modules and the lock file before running npm install again if versions are mismatched.