Getting started with EJ2 TypeScript Chart control

31 Jul 20267 minutes to read

This document explains how to create a simple Chart 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:

Dependencies

Below is the list of dependencies used by the Charts 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

@syncfusion/ej2-pdf-export, @syncfusion/ej2-file-utils, and @syncfusion/ej2-compression are optional and required only for PDF export features. Omit them if you are not using exports.

Use the latest @syncfusion/ej2-* packages that are compatible with your installed Node.js version.

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

This creates an ej2-quickstart folder in the current directory that contains the seed project.

Step 3: Navigate to Project Folder

Run the following command to navigate to the cloned project directory.

cd ej2-quickstart

Step 4: Install Required Packages

Syncfusion JavaScript (Essential JS 2) packages are available on the npmjs.com public registry. Install either the umbrella package or the individual control package:

The quickstart application is preconfigured with the @syncfusion/ej2 dependency in the ~/package.json file, including a start script that runs the webpack dev server. Use the following command to install all the npm packages from the command prompt.

npm install

This command downloads and installs all the dependencies required for the project.

Step 5: Update the HTML Template

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

Note: Code snippets here use webpack for local development. For online demos or StackBlitz, SystemJS may be used—ignore loader/helper scripts in rendered previews.

Locate the ~/src/index.html file in the project and add an HTML <div> with its id attribute set to element to initialize the Chart container.

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

<head>
    <title>Essential JS 2 Chart</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" />
</head>

<body>
     <h1>Syncfusion Chart</h1>
     <!-- Container which renders the Chart -->
     <div id='element'></div>
</body>

</html>

The webpack dev server injects the compiled app.js bundle automatically, so no manual <script> tag is required.

Step 6: Create the Chart Component with Data

Locate the src/app/app.ts file in your project. Import the Chart component along with the modules you need, prepare the sample data, and instantiate the chart.

Module Injection: The Chart component requires specific feature modules to be registered before use. To render a column series with a category axis, inject the ColumnSeries and Category modules.

Populate Chart with Data: Add a series object to the chart by using the series property. Map the JSON fields month and sales to the series xName and yName properties, and assign the JSON array as the dataSource property.

Since the JSON contains category data, set the valueType of the horizontal axis (primaryXAxis) to Category. By default, the value type is Numeric.

import { Chart, ColumnSeries, Category } from '@syncfusion/ej2-charts';

// Register required feature modules
Chart.Inject(ColumnSeries, Category);

// Sample data for the chart
let chartData: Object[] = [
    { 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 }
];

// Initialize the Chart
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category'
    },
    series: [{
        // Data source for chart series
        dataSource: chartData,
        xName: 'month',
        yName: 'sales',
        type: 'Column'
    }],
    title: 'Sales Data'
});

// Render the chart to the target container
chart.appendTo('#element');

Step 7: Run the Application

Open the integrated terminal in Visual Studio Code, or use your command prompt, and run the application with the npm run start command.

npm run start

The application compiles and automatically opens in your default web browser. By default, the dev server runs at http://localhost:4000. If that port is in use, webpack selects the next available port and prints the URL in the terminal.

When the build completes, the Syncfusion® Chart control renders on the page and is ready for further customization.

Output

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

Syncfusion Chart Quick Start Output - Column chart of monthly sales data

Troubleshooting

  • Cannot find module '@syncfusion/ej2-charts' — Dependencies are not installed. Run npm install in the project root.
  • Chart renders but axis is empty — The Category module was not injected. Verify that Chart.Inject(ColumnSeries, Category) is called before chart construction.
  • Series does not appear — The ColumnSeries module was not injected. Add ColumnSeries to the Chart.Inject(...) call.
  • Port 4000 already in use — Another process is bound to the port. Stop the conflicting process or change devServer.port in webpack.config.js.
  • TypeScript build error — Verify that all dependencies are installed by running npm install. If the issue continues, check the TypeScript version configured in the project.

See also