Easily show the parameters of the transmission lines in high-frequency circuit applications.
Visualize the Smith chart by adding built-in features like legends, markers, tooltips, and data labels.
Print or export the Smith chart in PDF, SVG, PNG, and JPEG formats.

Trusted by the world’s leading companies

Angular angular smith chart

Overview

The Angular Smith Chart is a control for showing the parameters of transmission lines in high-frequency circuit applications. Its rich feature set includes features like legends, markers, tooltips, and data labels.

Angular Smith Chart Code Example

Easily get started with the Angular Smith Chart using a few simple lines of ts code example as demonstrated below. Also explore our Angular Smith Chart Example that shows you how to render and configure the Smith Chart in Angular.

ts
import { Component } from '@angular/core';

@Component({
    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: 10, reactance: 25 }, { resistance: 8, reactance: 6 },
                { resistance: 6, reactance: 4.5 }, { resistance: 4.5, reactance: 2 },
                { resistance: 3.5, reactance: 1.6 }, { resistance: 2.5, reactance: 1.3 },
                { resistance: 2, reactance: 1.2 }, { resistance: 1.5, reactance: 1 },
                { resistance: 1, reactance: 0.8 }, { resistance: 0.5, reactance: 0.4 },
                { resistance: 0.3, reactance: 0.2 }, { resistance: 0, reactance: 0.15 },
            ];
    public seriespoints: object[] = [
                { resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },
                { resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },
                { resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },
                { resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },
                { resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },
                { resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },
                { resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },
                { resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 },
            ];
}

Rendering type

Visualize both the impedance and admittance of transmission lines with Smith chart.

Rendering types example

Angular JS2 Smith Chart with title and subtitle.

Title and subtitle

Add a title and subtitle to the JavaScript Smith chart control to visualize additional information about the data represented. You can customize the font and alignment of the title and subtitle.

Title and subtitle example

Multiple series

Plot any number of line series for representing data.

Angular Smith Chart with multiple series.

Angular Smith Chart with customized axis.

Axis customization

The Angular Smith chart control supports a horizontal axis and radial axis. The horizontal axis is used for plotting resistance values of transmission lines and the radial axis is used for plotting nonresistance values of transmission lines.

Customized axis example

Marker

Markers highlight data points to improve readability.

Marker documentation

Angular Smith Chart with markers.

Angular Smith Chart with data labels.

Data labels

Easily annotate the data points with labels to help improve the readability of data. The data labels in the Angular Smith chart control are smartly arranged to avoid intersection when there are large amounts of data.

Data label documentation

Legend

A legend provides additional information that is helpful in identifying individual series in a Smith chart. It can be docked at the left, right, top, or bottom positions around the plot area. By clicking a legend item, we can toggle series visibility.

Legend documentation

Angular Smith chart rendered with legend.

Angular Smith Chart with animation.

Animation

Animate the series in the Angular Smith chart while rendering.

The interactive Angular Smith chart displays a pop-up with additional information when the mouse is hovered over a data point.

Tooltip documentation

Displays a tooltip on moving mouse over the Angular Smith Chart.

Exporting

Print or export the rendered Angular Smith chart to save a local copy for further use.

Print and export example

Export Angular Smith Chart illustration.

Export

You can export the Smith chart to a PDF document or in image formats such as SVG, PNG, and JPEG in client-side.

Print Angular Smith Chart illustration.

Print

Print the rendered Smith chart directly from the browser.

Touch and browser support

The interactive Smith chart control also support touch interactions.

Touch illustration in Angular Smith Chart.

Touch support

All the Smith chart features will work on touch devices with zero configuration. Use the touch features, such as tooltips and toggling series visibility using the legend, without any customization.

Responsive illustration in Angular Smith Chart

Responsive

You can view the Smith chart control on various devices. Also hide specific elements in the Smith chart for particular screen sizes by making a very minimal change in the events.

Cross browser illustration in Angular Smith Chart.

Cross-browser support

You can render the Smith chart component in all modern browsers.

Cross-browser compatibility documentation

Angular version compatibility

With continuous improvement in Angular versions, the Angular Smith Chart is kept up to date to make it compatible with the latest version.

Angular 11 illustration.

Angular 11

Other supported frameworks

The Smith Chart is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links:

Supported browsers

The Angular Smith Chart works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.

Supported browsers in Angular Smith Chart.

Not sure how to create your first Angular Smith Chart? Our documentation can help.

I’d love to read it now

ALL COMPONENTS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

DROPDOWNS

FILE VIEWERS & EDITORS

BUTTONS

INTERACTIVE CHAT

INPUTS

NAVIGATION

LAYOUT

FORMS

Query Builder UI

NOTIFICATION

Frequently Asked Questions

✅ Why should you choose the Syncfusion Angular Smith Chart?

The Syncfusion Angular Smith Chart component includes the following features:

Impedance and admittance rendering types.
Legends, markers, tooltips, and data labels.
Printing and exporting in PDF, SVG, PNG, and JPEG formats.
Simple configuration and API.
Support for all modern browsers.
Extensive demos and documentation, to learn quickly and get started with the Angular Smith Chart component.

✅ Where can I find the Syncfusion Angular Smith Chart demo?

You can find our Angular Smith Chart demo, which demonstrates how to render and configure the Smith Chart.

✅ Can I download and utilize the Syncfusion Angular Smith Chart for free?

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

✅ How do I get started with Syncfusion Angular Smith Chart?

A good place to start would be our comprehensive getting started documentation.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

An amazing toolset to accelerate UI development

The number of components available is the best thing about this library. We think of a UI component, and the Angular JS library already offers it. We use the Angular JS library to accelerate development. The experience using and implementing has been great. The support is also excellent.