HelpBot Assistant

How can I help you?

Getting started with Angular Smith Chart component

18 Feb 202624 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.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

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® CodeStudio and more. Explore Syncfusion® AI Coding Assistant

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion® Angular UI Components.

Setup the Angular application

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

npm install -g @angular/cli

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 a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app
  • This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
? 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.

Initial_setup

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

Initial_setup

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

Note: In Angular 19 and below, the CLI generates files like app.component.ts, app.component.html, app.component.css, etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Installing Syncfusion® Smith Chart package

Syncfusion®’s Angular component packages are available on npmjs.com. To use Syncfusion® Angular components, install the necessary package.

This guide uses the Angular Smith Chart component for demonstration. Add the Angular Smith Chart component with:

ng add @syncfusion/ej2-angular-charts

The above command will perform the following configurations:

  • Add the @syncfusion/ej2-angular-charts package and peer dependencies to your package.json.
  • Import the Smith Chart component in your application.

For more details on version compatibility, refer to the Version Compatibility section.

Syncfusion® offers two package structures for Angular components:

  1. Ivy library distribution package format
  2. Angular compatibility compiler (ngcc), which is Angular’s legacy compilation pipeline.
    Syncfusion®’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute: 
    ng add @syncfusion/ej2-angular-charts

    For applications not compiled with Ivy, use the ngcc tagged packages:

    The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of Ivy compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.

npm add @syncfusion/[email protected]

Add Smith Chart component

Modify the template in app.component.ts file to render the ej2-angular-charts component
[src/app/app.component.ts].

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

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

Now use the app-root in the index.html instead of default one.

<app-root></app-root>

Now run the application in the browser using the below command.

    npm start

The below example shows a basic Smith Chart.

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

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

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Module Injection

Smith Chart components are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the app.component.ts. In the current application, we are going to modify the above basic Smith Chart to visualize transmission lines.
For this application, we are going to use tooltip and legend features of the Smith Chart. Please find the relevant feature service name and description as follows.

  • SmithchartLegendService - Inject this provider to use legend feature.
  • TooltipRenderService - Inject this provider to use tooltip feature.

These modules should be injected to the provider section as follows,

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

    @Component({
        imports: [
            SmithchartModule
        ],
        standalone: true,
        providers: [ SmithchartLegendService, TooltipRenderService ]
    })

Add series to Smith Chart

Smith Chart has two types of specification for adding series.

  • dataSource - Using this, a data object can bind directly by specifying the resistance and reactance values to add series to Smith Chart.
  • points - Using this, a collection of resistance and reactance values can bind directly to render series.

The below sample demonstrates adding two series to Smith Chart both ways.

  • First series Transmission1 shows dataSource bound series.
  • Second series Transmission2 shows points bound series.
import { Component } from '@angular/core';
import { SmithchartModule, TooltipRenderService, SmithchartLegendService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [SmithchartModule],
    providers: [TooltipRenderService, SmithchartLegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-smithchart style='display: block;' id='container' height='350px'>
        <e-seriesCollection>
            <e-series [dataSource]='seriesdata1' name='Transmission1' reactance='reactance' resistance='resistance'></e-series>
            <e-series [points]='seriespoints' name='Transmission2'></e-series>
        </e-seriesCollection>
    </ejs-smithchart>`
})
export class AppComponent {
    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));

Add title to Smith Chart

The Smith Chart title API is used to add a title for Smith Chart. The text API is used to set the text of the title.
The visible API is used to toggle the title.

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

@Component({
    imports: [SmithchartModule],
    providers: [TooltipRenderService, SmithchartLegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-smithchart style='display: block;' id='container' [title]='title' height='350px'>
        <e-seriesCollection>
            <e-series [dataSource]='seriesdata1' name='Transmission1' reactance='reactance' resistance='resistance'></e-series>
            <e-series [points]='seriespoints' name='Transmission2'></e-series>
        </e-seriesCollection>
    </ejs-smithchart>`
})
export class AppComponent {
    public title: TitleModel = { text: 'Transmission lines applied for both impedance and admittance' };
    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));

Enable marker to Smith Chart

To use series marker and its customization in Smith Chart, use the series marker. To display marker for a particular series, you need to specify visible as true. The below sample shows marker enabled for the first series only.

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

@Component({
    imports: [SmithchartModule],
    providers: [TooltipRenderService, SmithchartLegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-smithchart style='display: block;' id='container' [title]='title' height='350px'>
        <e-seriesCollection>
            <e-series [marker]='marker' [dataSource]='seriesdata1' name='Transmission1' reactance='reactance' resistance='resistance'></e-series>
            <e-series [points]='seriespoints' name='Transmission2'></e-series>
        </e-seriesCollection>
    </ejs-smithchart>`
})
export class AppComponent {
    public title: object = { text: 'Transmission lines applied for both impedance and admittance' };
    public marker: 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));

Enable data label to Smith Chart marker

To use marker data label and its customization in Smith Chart, use the marker dataLabel. To display data label for a particular series marker, you need to specify visible as true in that series marker. The below sample shows data label enabled for the first series.

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

@Component({
    imports: [SmithchartModule],
    providers: [TooltipRenderService, SmithchartLegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-smithchart style='display: block;' id='container' [title]='title' height='350px'>
        <e-seriesCollection>
            <e-series [marker]='marker' [dataSource]='seriesdata1' name='Transmission1' reactance='reactance' resistance='resistance'></e-series>
            <e-series [points]='seriespoints' name='Transmission2'></e-series>
        </e-seriesCollection>
    </ejs-smithchart>`
})
export class AppComponent {
    public title: object = { text: 'Transmission lines applied for both impedance and admittance' };
    public marker: object = {
        visible: true,
        dataLabel: {
            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));

Enable legend for Smith Chart

Smith Chart has a legend feature, which is used to denote the corresponding series. To enable the legend, you need to inject the SmithchartLegendService module and set Smith Chart legendSettings visible property to true. The following example shows how to enable legend for Smith Chart. The series name can be customized using the series name property.

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

@Component({
    imports: [SmithchartModule],
    providers: [TooltipRenderService, SmithchartLegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-smithchart style='display: block;' id='container' [title]='title' [legendSettings]='legendSettings' height='350px'>
        <e-seriesCollection>
            <e-series [marker]='marker' [dataSource]='seriesdata1' name='Transmission1' reactance='reactance' resistance='resistance'></e-series>
            <e-series [points]='seriespoints' name='Transmission2'></e-series>
        </e-seriesCollection>
    </ejs-smithchart>`
})
export class AppComponent {
    public title: object = { text: 'Transmission lines applied for both impedance and admittance' };
    public marker: object = {
        visible: true,
        dataLabel: {
            visible: true
        }
    };
    public legendSettings: 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));

Enable tooltip for Smith Chart series

Smith Chart has a tooltip feature, which is used to show the current point’s values. To enable the tooltip, you need to inject the TooltipRenderService module and set the Smith Chart series tooltip visible property to true. The following example shows how to enable tooltip for Smith Chart series collection.

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

@Component({
    imports: [SmithchartModule],
    providers: [TooltipRenderService, SmithchartLegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-smithchart style='display: block;' id='container' [title]='title' [legendSettings]='legendSettings' height='350px'>
        <e-seriesCollection>
            <e-series [marker]='marker' [tooltip]='tooltip' [dataSource]='seriesdata1' name='Transmission1' reactance='reactance' resistance='resistance'></e-series>
            <e-series [points]='seriespoints' [tooltip]='tooltip' name='Transmission2'></e-series>
        </e-seriesCollection>
    </ejs-smithchart>`
})
export class AppComponent {
    public title: object = { text: 'Transmission lines applied for both impedance and admittance' };
    public marker: object = {
        visible: true,
        dataLabel: {
            visible: true
        }
    };
    public tooltip: object = {
        visible: true
    };
    public legendSettings: 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));