Getting Started with EJ2 TypeScript Smith Chart

12 Aug 202610 minutes to read

This document explains how to create a simple Smith Chart and configure its features in TypeScript using the Essential^® JS 2 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 Smith Chart 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-svg-base
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-file-utils

Quick Setup

Step 1: Open Command Prompt

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

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 container inside <body> to initialize the Smith Chart container.

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

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

<body>
    <!--container which is going to render the Smith Chart-->
    <div id='container'>
    </div>
</body>

</html>

Step 6: Create the Smith Chart Component

Locate the src/app/app.ts file in your project and add the Smith Chart component.

Module Injection: The Smith Chart component is segregated into individual feature-specific modules. To use a particular feature, inject its module using the Smithchart.Inject() method. The commonly used modules are:

SmithchartLegend — Inject to use the legend feature.
TooltipRender — Inject to use the tooltip feature.

Populate the chart with data: The Smith Chart supports two ways to add a series:

series[].dataSource — Bind an array of { resistance, reactance } objects. Use series[].resistance and series[].reactance to map the field names.
series[].points — Provide an array of { resistance, reactance } points directly on the series.

The new Smithchart({...}) call creates the Smith Chart component. Pass series, an array of series objects, to render curves on the chart. Each series with a dataSource needs matching resistance and reactance field names; each series with points does not. Finally, smithchart.appendTo('#container') renders the control into the <div id="container"> element declared in index.html.

app.ts
import { Smithchart } from '@syncfusion/ej2-charts';

let smithchart: Smithchart = new Smithchart({
    series: [
        {
            dataSource: [
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }

            ],
            name: 'Transmission1',
            reactance: 'reactance', resistance: 'resistance'
        },
        {
            points: [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }],
            name: 'Transmission2'
        }
    ]
});
smithchart.appendTo('#container');

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^® Smith Chart control displayed on the page. To stop the dev server, press Ctrl+C in the terminal.

Output

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

Syncfusion Smith Chart Quick Start Output

Troubleshooting

Cannot find module '@syncfusion/ej2-charts' — Dependencies were not installed. Re-run npm install.
Smithchart is undefined or cannot be imported — Ensure that Smithchart is imported from @syncfusion/ej2-charts and that the package is installed.
Chart renders without data — When using series[].dataSource, you must also set the matching resistance and reactance field names; otherwise the series renders empty. Use series[].points instead if you want to pass values directly.
TypeScript compile errors after npm install — Run npm run build to view the complete error details. Common causes include missing dependencies, incorrect import statements, or mismatched Syncfusion package versions.

Search docs

Ask Syncfusion AI Assistant