Blazor

Search results

Getting started with Blazor Smith Chart component

08 Apr 2021 / 6 minutes to read

This section briefly explains about how to include a Smith Chart in your Blazor server-side application. You can refer Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019 page for the introduction and configuring the common specifications.

Importing Syncfusion Blazor component in the application

Install Syncfusion.Blazor NuGet package to the application by using the NuGet Package Manager.
You can add the client-side resources through CDN or from NuGet package in the HEAD element of the ~/Pages/_Host.cshtml page.

<head>
<link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
<!---CDN--->
@*<link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" />*@
</head>

For Internet Explorer 11, kindly refer the polyfills. Refer the documentation for more information.

<head>
<link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" />
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</head>

Adding component package to the application

Open **~/_Imports.razor file and include the Syncfusion.Blazor.Charts namespace.

@using Syncfusion.Blazor.Charts

Add SyncfusionBlazor service in Startup.cs

Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.

using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
    ....
    ....
    public void ConfigureServices(IServiceCollection services)
    {
        ....
        ....
        services.AddSyncfusionBlazor();
    }
}
}

To enable custom client-side source loading from CRG or CDN, please refer to the section about custom resources in Blazor application.

Add Smith Chart component

To initialize the Smith Chart component, add the below code to your Index.razor view page under ~/Pages folder. In a new application, if Index.razor page has any default content template, then those content can be completely removed and following code can be added.

@page "/"

<SfSmithchart>

</SfSmithchart>

On successful compilation of your application, the Syncfusion Blazor Smith Chart component will render in the web browser as shown below.

Smith chart Sample

Add series to Smith Chart

Smith Chart series can be added in two ways. You can use either Points or Datasource in the SmithChartSeries.

If you add using Datasource property, additionally you need to specify datasource mapping fields using Reactance and Resistance properties.

If you are using Points, you don’t need to specify mapping fields as like in DataSource. But the Points collection type should be SmithChartPoint and define Resistance and Reactance fields.

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

First series Transmission1 shows DataSource bound series.
Second series Transmission2 shows Points bound series.

<SfSmithChart>
<SmithChartSeriesCollection>
    <SmithChartSeries Name="Transmission1"
                      Reactance="Reactance"
                      Resistance="Resistance"
                      DataSource="@FirstTransmissionSeries">
    </SmithChartSeries>
    <SmithChartSeries Name="Transmission2"
                      Points="@SecondTransmissionSeries">
    </SmithChartSeries>
</SmithChartSeriesCollection>
</SfSmithChart>

@code {
public class SmithDataSource
{
    public double Resistance { get; set; }
    public double Reactance { get; set; }
};
public List<SmithDataSource> FirstTransmissionSeries = new List<SmithDataSource> {
    new SmithDataSource { Resistance= 10, Reactance= 25 },
    new SmithDataSource { Resistance= 8, Reactance= 6 },
    new SmithDataSource { Resistance= 6, Reactance= 4.5 },
    new SmithDataSource { Resistance= 4.5, Reactance= 2 },
    new SmithDataSource { Resistance= 3.5, Reactance= 1.6 },
    new SmithDataSource { Resistance= 2.5, Reactance= 1.3 },
    new SmithDataSource { Resistance= 2, Reactance= 1.2 },
    new SmithDataSource { Resistance= 1.5, Reactance= 1 },
    new SmithDataSource { Resistance= 1, Reactance= 0.8 },
    new SmithDataSource { Resistance= 0.5, Reactance= 0.4 },
    new SmithDataSource { Resistance= 0.3, Reactance= 0.2 },
    new SmithDataSource { Resistance= 0.001, Reactance= 0.15 }
};
public List<SmithChartPoint> SecondTransmissionSeries = new List<SmithChartPoint> {
    new SmithChartPoint { Resistance= 20, Reactance= -50 },
    new SmithChartPoint { Resistance= 10, Reactance= -10 },
    new SmithChartPoint { Resistance= 9, Reactance= -4.5 },
    new SmithChartPoint { Resistance= 8, Reactance= -3.5 },
    new SmithChartPoint { Resistance= 7, Reactance= -2.5 },
    new SmithChartPoint { Resistance= 6, Reactance= -1.5 },
    new SmithChartPoint { Resistance= 5, Reactance= -1 },
    new SmithChartPoint { Resistance= 4.5, Reactance= -0.5 },
    new SmithChartPoint { Resistance= 2, Reactance= 0.5 },
    new SmithChartPoint { Resistance= 1.5, Reactance= 0.4 },
    new SmithChartPoint { Resistance= 1, Reactance= 0.4 },
    new SmithChartPoint { Resistance= 0.5, Reactance= 0.2 },
    new SmithChartPoint { Resistance= 0.3, Reactance= 0.1 },
    new SmithChartPoint { Resistance= 0.001, Reactance= 0.05 }
};
}

Smith chart with transmission series

Add Title

You can add a title by using Text property in the SmithChartTitle.

<SfSmithChart>
<SmithChartTitle Text="Impedance Transmission">
</SmithChartTitle>
<SmithChartSeriesCollection>
    <SmithChartSeries Name="Transmission1"
                      Reactance="Reactance"
                      Resistance="Resistance"
                      DataSource="@FirstTransmissionSeries">
    </SmithChartSeries>
    <SmithChartSeries Name="Transmission2"
                      Points="@SecondTransmissionSeries">
    </SmithChartSeries>
</SmithChartSeriesCollection>
</SfSmithChart>

Refer code block to know the property value of FirstTransmissionSeries and SecondTransmissionSeries.

Smith chart with title

Enable Marker

To display marker for particular series, need to set the Visible property to true in SmithChartSeriesMarker.

In below sample, marker is enabled for first series only.

<SfSmithChart>
<SmithChartTitle Text="Impedance Transmission">
</SmithChartTitle>
<SmithChartSeriesCollection>
    <SmithChartSeries Name="Transmission1"
                      Reactance="Reactance"
                      Resistance="Resistance"
                      DataSource="@FirstTransmissionSeries">
        <SmithChartSeriesMarker Visible="true"></SmithChartSeriesMarker>
    </SmithChartSeries>
    <SmithChartSeries Name="Transmission2"
                      Points="@SecondTransmissionSeries">
    </SmithChartSeries>
</SmithChartSeriesCollection>
</SfSmithChart>

Refer code block to know the property value of FirstTransmissionSeries and SecondTransmissionSeries.

Smith chart with marker

Enable Data Label

To display data label for particular marker series, need to set Visible property to true in SmithChartSeriesDatalabel.

In below sample, data label is enabled for first series only.

<SfSmithChart>
<SmithChartTitle Text="Impedance Transmission">
</SmithChartTitle>
<SmithChartSeriesCollection>
    <SmithChartSeries Name="Transmission1"
                      Reactance="Reactance"
                      Resistance="Resistance"
                      DataSource="@FirstTransmissionSeries">
        <SmithChartSeriesMarker Visible="true">
            <SmithChartSeriesDatalabel Visible="true">
            </SmithChartSeriesDatalabel>
        </SmithChartSeriesMarker>
    </SmithChartSeries>
    <SmithChartSeries Name="Transmission2" Points="@SecondTransmissionSeries">
    </SmithChartSeries>
</SmithChartSeriesCollection>
</SfSmithChart>

Refer code block to know the property value of FirstTransmissionSeries and SecondTransmissionSeries.

Smith chart with data label and marker

Enable Legend

You can use legend for the Smith Chart by setting the Visible property to true in SmithChartLegendSettings. The legend name can be changed by using the Name property in the SmithChartSeries.

<SfSmithChart>
<SmithChartLegendSettings Visible="true"></SmithChartLegendSettings>
<SmithChartTitle Text="Impedance Transmission"></SmithChartTitle>
<SmithChartSeriesCollection>
    <SmithChartSeries Name="Transmission1"
                      Reactance="Reactance"
                      Resistance="Resistance"
                      DataSource="@FirstTransmissionSeries">
        <SmithChartSeriesMarker Visible="true">
            <SmithChartSeriesDatalabel Visible="true">
            </SmithChartSeriesDatalabel>
        </SmithChartSeriesMarker>
    </SmithChartSeries>
    <SmithChartSeries Name="Transmission2" Points="@SecondTransmissionSeries">
    </SmithChartSeries>
</SmithChartSeriesCollection>
</SfSmithChart>

Refer code block to know the property value of FirstTransmissionSeries and SecondTransmissionSeries.

Smith chart with legend

When space constraints prevent you from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the Visible property in SmithChartSeriesTooltip to true.

<SfSmithChart>
<SmithChartLegendSettings Visible="true"></SmithChartLegendSettings>
<SmithChartTitle Text="Impedance Transmission"></SmithChartTitle>
<SmithChartSeriesCollection>
    <SmithChartSeries Name="Transmission1"
                      Reactance="Reactance"
                      Resistance="Resistance"
                      DataSource="@FirstTransmissionSeries">
        <SmithChartSeriesMarker Visible="true">
            <SmithChartSeriesDatalabel Visible="true">
            </SmithChartSeriesDatalabel>
        </SmithChartSeriesMarker>
        <SmithChartSeriesTooltip Visible="true">
        </SmithChartSeriesTooltip>
    </SmithChartSeries>
    <SmithChartSeries Name="Transmission2" Points="@SecondTransmissionSeries">
    </SmithChartSeries>
</SmithChartSeriesCollection>
</SfSmithChart>

Refer code block to know the property value of FirstTransmissionSeries and SecondTransmissionSeries.

Smith chart with tooltip

Getting started with Blazor Smith Chart component

Importing Syncfusion Blazor component in the application

Adding component package to the application

Add SyncfusionBlazor service in Startup.cs

Add Smith Chart component

Add series to Smith Chart

Add Title

Enable Marker

Enable Data Label

Enable Legend

Enable Tooltip

See also