Getting started with EJ2 TypeScript Range Navigator control

31 Jul 20267 minutes to read

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

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. Ensure that Node.js is installed on your machine. For more information about webpack and its features, refer to the webpack getting-started guide.

Prerequisites

Before you begin, ensure you have the following installed on your machine:

  • Node.js
  • Visual Studio Code (or any text editor)
  • Git for cloning the quickstart repository
  • A modern web browser (Chrome, Edge, Firefox, or Safari) to view the result

Dependencies

The Range Navigator 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-navigations
    |-- @syncfusion/ej2-calendars

Quick Setup

Step 1: Open Command Prompt

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

  • For Windows: Open Command Prompt (cmd) or PowerShell and use the cd command to navigate to your desired directory.
  • For macOS/Linux: Open Terminal and use the cd command to navigate to your desired directory.

Step 2: Clone the Quickstart Repository

Run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from GitHub.

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

Step 3: Navigate to Project Folder

After cloning the application in the ej2-quickstart folder, run the following command to navigate to the project directory.

cd ej2-quickstart

Step 4: Install Required Packages

Syncfusion JavaScript (Essential JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

The quickstart application is already preconfigured with the dependent @syncfusion/ej2 package in the ~/package.json file. Use the following command to install all the dependent npm packages from the command prompt:

npm install

This command will download and install all necessary dependencies for your project.

Step 5: Update the HTML Template

Open the ej2-quickstart folder in Visual Studio Code or any text editor of your choice.

Locate the ~/src/index.html file in the project, preserve any existing <link> and <script> tags that were generated by the seed, and add the HTML div tag with its id attribute as element inside <body> to initialize the Range Navigator container.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Range Navigator</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" />
    <!-- existing head content from the seed template remains here -->
</head>

<body>
    <h1>Syncfusion Range Navigator</h1>
    <!--container which is going to render the Range Navigator-->
    <div id='element'>
    </div>
</body>

</html>

Step 6: Create the Range Navigator Component with Data

Locate the src/app/app.ts file in your project and add the Range Navigator component with module injection and sample data.

Module Injection: The Range Navigator requires specific feature modules to be injected. For displaying an Area series and a DateTime axis, inject the AreaSeries and DateTime modules.

Populate Range Navigator with Data: Create a series object for the Range Navigator. Map the field names x and y in the JSON data to the xName and yName properties of the series, then set the JSON data to the dataSource property. Since the JSON contains DateTime data, set the valueType to 'DateTime'. By default, the axis valueType is 'Double'.

Provide the Sample Data: Create a datasource.ts file in src/app that exports the sample data as a datasrc array (for example, export let datasrc: Object[] = [...]).

import { RangeNavigator, AreaSeries, DateTime } from "@syncfusion/ej2-charts";
RangeNavigator.Inject(AreaSeries, DateTime);
import { datasrc } from "./datasource.ts";

let range: RangeNavigator = new RangeNavigator({
    valueType: 'DateTime',
    labelFormat: 'dd-MMM',
    series: [{
        dataSource: datasrc, xName: 'x', yName: 'y', type: 'Area', width: 2,
    }],
}, '#element');
/**
 * Range Navigator datasource
 */
export const datasrc: Object[] = [
    { x: new Date("2017-05-01"), y: 1402.08 },
    { x: new Date("2017-05-02"), y: 1443.68 },
    { x: new Date("2017-05-03"), y: 1492.00 },
    { x: new Date("2017-05-04"), y: 1515.63 },
    { x: new Date("2017-05-05"), y: 1512.21 },
    { x: new Date("2017-05-06"), y: 1548.29 },
    { x: new Date("2017-05-07"), y: 1555.47 },
    { x: new Date("2017-05-08"), y: 1639.32 },
    { x: new Date("2017-05-09"), y: 1706.93 },
    { x: new Date("2017-05-10"), y: 1756.80 },
    { x: new Date("2017-05-11"), y: 1807.37 },
    { x: new Date("2017-05-12"), y: 1676.99 },
    { x: new Date("2017-05-13"), y: 1759.96 },
    { x: new Date("2017-05-14"), y: 1772.42 },
    { x: new Date("2017-05-15"), y: 1697.38 }
];

Step 7: Run the Application

Open the integrated terminal in Visual Studio Code or use your command prompt to run the application. Use the npm run start command:

npm run start

The application will compile and automatically start in your default web browser. The application typically runs at http://localhost:4000. You should see the Syncfusion® Range Navigator control displayed on the page with the sample data and Area series. To stop the dev server, press Ctrl+C in the terminal. For a production build, use npm run build.

Output

The following screenshot shows the output of the Syncfusion Range Navigator quick start application — an Area series rendering the sample data with a DateTime axis.

Syncfusion Range Navigator Quick Start Output

Troubleshooting

  • Blank page, no Range Navigator — The npm package failed to load. Verify the network tab and that npm install finished successfully.
  • Cannot find module '@syncfusion/ej2-charts' — Dependencies were not installed. Re-run npm install.
  • 'RangeNavigator' is undefined or cannot be imported - Ensure that RangeNavigator is imported from @syncfusion/ej2-charts and that the package is installed.
  • The Area series or DateTime axis not appear - Ensure that the required modules are passed to RangeNavigator.Inject(...) before creating the control.