Getting Started with Angular Smith Chart Component

30 Jul 202610 minutes to read

This section explains the steps required to create an Angular Smith Chart and demonstrates the basic usage of the Smith Chart component in an Angular environment.

Ready to streamline your Syncfusion® Angular development? Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® Code Studio, and more. Explore Syncfusion® AI Coding Assistant

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion® Angular UI Components, which covers supported Node.js, Angular, and @syncfusion/ej2-angular-charts versions.

Setup the Angular application

A straightforward approach to begin with Angular is to create a new application using the Angular CLI. Install the Angular CLI globally with the following command:

npm install -g @angular/cli

Verify the installation:

ng version

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create an Angular application

With Angular CLI installed, execute this command to generate a new application. When prompted, accept the default options unless you have a specific reason to change them.

ng new syncfusion-angular-app
  • This command prompts you to configure settings like enabling Angular routing and choosing a stylesheet format. Accept the defaults (no routing, CSS) to follow this guide.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Server-side rendering prompt

  • Select the required AI tool, or ‘none’ if you do not need any AI tool.

AI tool selection prompt

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

In Angular 19 and below, the CLI generates files named app.component.ts, app.component.html, app.component.css, and so on. In Angular 20+, the structure is simpler: src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding the Syncfusion® Angular Smith Chart package

To install the Syncfusion® Angular Smith Chart package, use the following command:

ng add @syncfusion/ej2-angular-charts

The ng add command installs the package, registers it in package.json, and configures the required entries in your workspace automatically.

If ng add is unavailable in your setup, install the package manually with:

npm install @syncfusion/ej2-angular-charts

Add Syncfusion® Angular Smith Chart component

Open src/app/app.component.ts (Angular 19 and below) or src/app/app.ts (Angular 20+) and replace its contents with the following to render the Circular Gauge component.

import { SmithchartModule } from '@syncfusion/ej2-angular-charts';
import { Component } from '@angular/core';

@Component({
    imports: [
        SmithchartModule
    ],
    standalone: true,
    selector: 'app-root',
    // Specifies the template string for the Smith Chart component
    template: `<ejs-smithchart id='container'></ejs-smithchart>`,
})
export class AppComponent  { }

Module Injection

The Smith Chart component is divided into individual feature-based modules. To use a specific feature, you must inject its service provider. For standalone components, register services in the providers array of the component. This example uses the tooltip feature of the Smith Chart component.

  • TooltipRenderService - Inject this provider to use the tooltip feature.

The following example demonstrates injecting TooltipRenderService to enable the tooltip on the Smith Chart:

import { Component } from '@angular/core';
import { SmithchartModule, TooltipRenderService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [SmithchartModule],
    standalone: true,
    selector: 'app-root',
    providers: [ TooltipRenderService ]
    template: `<ejs-smithchart id='container'></ejs-smithchart>`,

})
export class AppComponent  { }

Add series to the Smith Chart

The Smith Chart supports two ways to bind data to a series.

  • dataSource - Bind a data object directly by specifying resistance and reactance field names to add a series.
  • points - Bind a collection of objects containing resistance and reactance values directly to render a series.

The following sample demonstrates adding two series to the Smith Chart using both approaches.

  • The first series, Transmission1, uses the dataSource binding.
  • The second series, Transmission2, uses the points binding.

Update the app.component.ts file as shown below to add the series data and template bindings.

import { Component } from '@angular/core';
import { SmithchartModule, TooltipRenderService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [SmithchartModule],
    providers: [TooltipRenderService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-smithchart style='display: block;' id='container' height='350px'>
        <e-seriesCollection>
            <e-series [tooltip]='tooltip' [dataSource]='seriesdata1' name='Transmission1' reactance='reactance' resistance='resistance'></e-series>
            <e-series [tooltip]='tooltip' [points]='seriespoints' name='Transmission2'></e-series>
        </e-seriesCollection>
    </ejs-smithchart>`
})
export class AppComponent {
    public tooltip: object = {
        visible: true
    };
    public seriesdata1: object[] = [
        { 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 }
    ];
    public seriespoints: object[] = [
        { 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 }
    ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Run the application

Run the development server with ng serve. Alternatively, npm start works if a start script is configured in package.json.

ng serve

Troubleshooting

  • If the Smith Chart does not render, confirm that SmithchartModule is listed in the imports array of the standalone component and that the development server has been restarted after package installation.
  • If features such as legend or tooltip do not appear, ensure the corresponding service (SmithchartLegendService or TooltipRenderService) is added to the providers array.
  • If you encounter Cannot find module '@syncfusion/ej2-angular-charts' errors, verify that the package is listed in package.json and run npm install to refresh node_modules.
  • For build errors related to the ngcc package on Angular 16+, switch to the standard Ivy-compatible package by running npm install @syncfusion/ej2-angular-charts@latest.

See also