Getting started with TypeScript Sparkline control

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. It requires Node.js v14.15.0 or later. 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 v14.15.0 or later, including npm
  • 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 part of the @syncfusion/ej2-charts package. The following minimum dependencies are installed automatically with the charts package:

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

Quick setup

Step 1: Create a project folder

Create a folder named my-sparkline in your desired location. This folder will contain the Syncfusion Sparkline TypeScript project.

Step 2: Open a terminal

Open a terminal and navigate to the my-sparkline folder created in Step 1.

  • Windows: Open Command Prompt or PowerShell and navigate to the my-sparkline folder.
  • macOS/Linux: Open Terminal and navigate to the my-sparkline folder.

Step 3: 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 4: Navigate to the project folder

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

cd ej2-quickstart

Step 5: 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.

If the installed Syncfusion package requires license registration, follow the Syncfusion license key registration documentation.

Step 6: 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 7: 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 8: 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.

Step 9: View the Sparkline

Wait for webpack to complete the build. The browser displays the Sparkline using the data configured in src/app/app.ts.

Output

After completing the quick setup, the application displays a Sparkline for the configured data. When the tooltip module is injected and tooltipSettings.visible is enabled, moving the pointer over a data point displays its value.

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.