Getting Started with ASP.NET Core Smith Chart Control

23 Jul 202624 minutes to read

This section briefly explains how to include the ASP.NET Core Smith Chart control in your ASP.NET Core application using Visual Studio.

Create an ASP.NET Core Web App with Razor Pages

Create an ASP.NET Core Web App using Visual Studio via Microsoft Templates or the Syncfusion® ASP.NET Core Extension. For detailed instructions, refer to the ASP.NET Core Web App Getting Started documentation.

Install the required ASP.NET Core package

To add ASP.NET Core Smith Chart control in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for and install the Syncfusion.AspNetCore.Smithchart package. All Syncfusion ASP.NET Core packages are available in nuget.org. See the NuGet packages topic for details.

Alternatively, you can install the same package using the Package Manager Console with the following command.

Install-Package Syncfusion.AspNetCore.Smithchart -Version 34.1.29

Add the ASP.NET Core Tag Helpers

After the package is installed, open the ~/Pages/_ViewImports.cshtml file and import the Syncfusion.AspNetCore.Base and Syncfusion.AspNetCore.Charts Tag Helpers.

@addTagHelper *, Syncfusion.AspNetCore.Base
@addTagHelper *, Syncfusion.AspNetCore.Charts

Add script resources

Include the script reference inside the <head> of ~/Pages/Shared/_Layout.cshtml.

<head>
    ...
    <!-- ASP.NET Core controls scripts -->
    <script src="_content/Syncfusion.AspNetCore.Charts/scripts/sf-smithchart.min.js"></script>
</head>

Register the script manager

Open the ~/Pages/Shared/_Layout.cshtml file and register the script manager <ejs-scripts> at the end of the <body> element as follows.

<body>
    ...
    <!-- ASP.NET Core Script Manager -->
    <ejs-scripts></ejs-scripts>
</body>

Add ASP.NET Core Smith Chart control

Add the ASP.NET Core Smith Chart control in the ~/Pages/Index.cshtml file.

<ejs-smithchart id="smithchart">
</ejs-smithchart>

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The ASP.NET Core Smith Chart control will render in your default web browser.

ASP.NET Core SmithChart Control

Add series to Smith Chart

The Smith Chart has the following two type of specification for adding series:

  • dataSource - Data object can be bound directly by specifying the resistance and reactance values.
  • points - Collection of resistance and reactance values can be bound directly to render the series.

The following two ways demonstrate adding two series to the Smith Chart.

  • First series Transmission1 shows dataSource bound series.
  • Second series Transmission2 shows points bound series.
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
<div id="control-section">
 <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1"></e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
</ejs-smithchart>
</div>
<script>
        function loaded(args) {
            window.smithchart = args.smithchart;
            args.smithchart.series[0].points = [
                { 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 }
            ];
            args.smithchart.series[1].points = [{ 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 }];
            args.smithchart.loaded = null;
            args.smithchart.refresh();
        }
    </script>

ASP.NET Core Smith Chart with Series

Add title to Smith Chart

Smith Chart title API used to add title for Smith Chart. In that text API used to set text of the title. API visible used to toggle the title.

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
<ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-title text="Transmission lines applied for both impedance and admittance"></e-smithchart-title>
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1"></e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
    </ejs-smithchart>
  <script>
        function loaded(args) {
            window.smithchart = args.smithchart;
            args.smithchart.series[0].points = [
                { 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 }
            ];
            args.smithchart.series[1].points = [{ 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 }];
            args.smithchart.loaded = null;
            args.smithchart.refresh();
        }
    </script>

ASP.NET Core Smith Chart with Title

Enable marker to the Smith Chart

To use marker in series and its customization in Smith Chart, use series marker API. To display marker for a particular series, specify the marker visible to true. In the following sample, markers are enabled only for the first series.

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
  <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-title text="Transmission lines applied for both impedance and admittance"></e-smithchart-title>
        <e-smithchart-legendsettings visible="true"></e-smithchart-legendsettings>
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1">
                <e-smithchartseries-marker visible="true"></e-smithchartseries-marker>
            </e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
    </ejs-smithchart>
 <script>
        function loaded(args) {
            window.smithchart = args.smithchart;
            args.smithchart.series[0].points = [
                { 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 }
            ];
            args.smithchart.series[1].points = [{ 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 }];
            args.smithchart.loaded = null;
            args.smithchart.refresh();
        }
    </script>

ASP.NET Core Smith Chart with Marker

Enable data label to marker

To use marker data label and its customization in Smith Chart, use marker dataLabel. To display data label for a particular series marker, specify the dataLabel visible to true in that series marker. In the following sample, data labels are enabled for the first series.

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
 <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-title text="Transmission lines applied for both impedance and admittance"></e-smithchart-title>
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1">
                <e-smithchartseries-marker visible="true">
                    <e-series-marker-datalabel visible="true"></e-series-marker-datalabel>
                </e-smithchartseries-marker>
            </e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
    </ejs-smithchart>
<script>
    function loaded(args) {
        window.smithchart = args.smithchart;
        args.smithchart.series[0].points = [
            { 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 }
        ];
        args.smithchart.series[1].points = [{ 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 }];
        args.smithchart.loaded = null;
        args.smithchart.refresh();
    }
</script>

ASP.NET Core Smith Chart with DataLabel

Enable legend for Smith Chart

The legend feature is used to denote the corresponding series. You can enable the legend for the Smith Chart by setting the [visible] property to true in [legendSettings] object. The following sample shows enabling legend for Smith chart. The series name can be customized using the series name.

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
 <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-title text="Transmission lines applied for both impedance and admittance"></e-smithchart-title>
        <e-smithchart-legendsettings visible="true"></e-smithchart-legendsettings>
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1">
                <e-smithchartseries-marker visible="true">
                    <e-series-marker-datalabel visible="true"></e-series-marker-datalabel>
                </e-smithchartseries-marker>
            </e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
</ejs-smithchart>
<script>
    function loaded(args) {
        window.smithchart = args.smithchart;
        args.smithchart.series[0].points = [
            { 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 }
        ];
        args.smithchart.series[1].points = [{ 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 }];
        args.smithchart.loaded = null;
        args.smithchart.refresh();
    }
</script>

Enable tooltip for the Smith Chart series

The tooltip feature is used to show the values of the current point. You can enable tooltip by setting the [visible] property to true in [tooltipSettings] object. The following sample shows enabling tooltip for Smith Chart series collection.

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
 <ejs-smithchart id="smithchart" loaded="loaded">
	<e-smithchart-title text="Transmission lines applied for both impedance and admittance"></e-smithchart-title>
	<e-smithchart-legendsettings visible="true"></e-smithchart-legendsettings>
	<e-smithchart-smithchartseriescollection>
		<e-smithchart-smithchartseries name="Transmission1">
			<e-smithchartseries-tooltip visible="true"></e-smithchartseries-tooltip>
			<e-smithchartseries-marker visible="true">
				<e-series-marker-datalabel visible="true"></e-series-marker-datalabel>
			</e-smithchartseries-marker>
		</e-smithchart-smithchartseries>
		<e-smithchart-smithchartseries name="Transmission2">
			<e-smithchartseries-tooltip visible="true"></e-smithchartseries-tooltip>
		</e-smithchart-smithchartseries>
	</e-smithchart-smithchartseriescollection>
</ejs-smithchart>
<script>
    function loaded(args) {
        window.smithchart = args.smithchart;
        args.smithchart.series[0].points = [
            { 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 },
        ];
        args.smithchart.series[1].points = [{ 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 },];
        args.smithchart.loaded = null;
        args.smithchart.refresh();
    }
</script>

ASP.NET Core Smith Chart with Tooltip

NOTE

View Sample in GitHub.

See also

  1. Getting Started with ASP.NET Core using Razor Pages
  2. Getting Started with ASP.NET Core MVC using Tag Helper