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

Overview

The Blazor Smith Chart is a component 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.

Blazor Smith Chart Code Example

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

razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts

<SfSmithChart >
<SmithChartSeriesCollection>
<SmithChartSeries Name="Transmission-2" DataSource='@SecondTransmissionData' Resistance="resistance" Reactance="reactance">
</SmithChartSeries>
</SmithChartSeriesCollection>
</SfSmithChart >
@code {
    public class SmithDataSource
    {
        public double? resistance { get; set; }
        public double? reactance { get; set; }
    };
    public List<SmithDataSource> SecondTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 20, reactance= -50 }, new SmithDataSource { resistance= 10, reactance= -10 },
        new SmithDataSource { resistance= 9, reactance= -4.5 }, new SmithDataSource { resistance= 8, reactance= -3.5 },
        new SmithDataSource { resistance= 7, reactance= -2.5 }, new SmithDataSource{ resistance= 6, reactance= -1.5 },
        new SmithDataSource { resistance= 5, reactance= -1 }, new SmithDataSource { resistance= 4.5, reactance= -0.5 },
        new SmithDataSource { resistance= 2, reactance= 0.5 }, new SmithDataSource { resistance= 1.5, reactance= 0.4 },
        new SmithDataSource { resistance= 1, reactance= 0.4 }, new SmithDataSource { resistance= 0.5, reactance= 0.2 },
        new SmithDataSource { resistance= 0.3, reactance= 0.1 }, new SmithDataSource { resistance= 0, reactance= 0.05 },
    };
}

Rendering type

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

Rendering types example

Blazor Smith Chart with title and subtitle.

Title and subtitle

Add a title and subtitle to the Blazor Smith Chart component to visualize additional information about the data represented. You can customize the font and alignment of the title and subtitle.

Multiple series

Plot any number of line series for representing data.

Blazor Smith Chart with multiple series.

Blazor Smith Chart with customized axis.

Axis customization

The Blazor Smith Chart component 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

Blazor Smith Chart with markers.

Blazor Smith Chart with data labels.

Data labels

Easily annotate the data points with labels to improve the readability of data. The data labels in the Blazor Smith Chart component 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

Blazor Smith Chart rendered with legend.

Blazor Smith Chart with animation.

Animation

Animate the series in the Blazor Smith Chart while rendering.

The interactive Blazor 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 Blazor Smith Chart.

Exporting

Print or export the rendered Blazor Smith Chart to save a local copy for further use.

Print and export example

Export Blazor 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 and export example

Print Blazor Smith Chart illustration.

Print

Print the rendered Smith chart directly from the browser.

Touch and browser support

The interactive Smith chart component also support touch interactions.

Touch illustration in Blazor Smith Chart.

Touch support

All the Blazor 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 Blazor Smith Chart.

Responsive

You can view the Blazor Smith Chart component 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 Blazor Smith Chart.

Cross-browser support

You can render the Blazor Smith Chart component in all the modern browsers.

Cross-browser compatibility documentation

Our comprehensive competitor comparison of Blazor components will guide you to the perfect choice.

145+ UI components

1200+ interactive Blazor demos

3.3M+ downloads

Explore Complete Blazor Comparison

Other supported frameworks

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

Supported browsers

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

Supported browsers in Blazor Smith Chart.

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

I’d love to read it now

ALL COMPONENTS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

FILE VIEWERS & EDITORS

DROPDOWNS

NAVIGATION

INPUTS

LAYOUT

BUTTONS

INTERACTIVE CHAT

FORMS

NOTIFICATION

Frequently Asked Questions

✅ Why should you choose the Syncfusion Blazor Smith Chart?

The Syncfusion Blazor 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.
One of the best Blazor Smith Chart in the market that offers feature-rich UI to interact with the software.
Simple configuration and API.
Support all modern browsers.
Mobile-touch friendly and responsive.
Extensive demos and documentation, to learn quickly and get started with the Blazor Smith Chart component.

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

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

✅ Can I download and utilize the Syncfusion Blazor 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 Blazor 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.

Blazor components

The speed how they adding new Blazor controls and update theirs functionality. I am using Blazor components. Searching for Blazor components I found that Syncfusion very fast adopted theirs controls for new development platform. Tech support is fast and excellent. The best of best is that they provide free controls for small business.

Igor L,

CEO, Small-Business

Syncfusion objects with a Blazor

I have used some of the Syncfusion objects with a Blazor application. The support group has always been very helpful.

Kris B,

Software Development Consultant, Small-Business

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Explore Case Studies

Industry

Software development

75%Cost reduction

50%Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story