Imported from syncfusion/blazor-ui-components-skills (skills/syncfusion-blazor-smith-charts/SKILL.md). Install upstream with npx skills add syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-smith-charts. Copyright stays with the author.

Implementing Smith Charts

Name: syncfusion-blazor-smith-charts
Author: syncfusion

NuGet: Syncfusion.Blazor.Charts + Syncfusion.Blazor.Themes (or Syncfusion.Blazor.SmithChart for individual package) Namespace: Syncfusion.Blazor.Charts

The Syncfusion Blazor Smith Chart (SfSmithChart) is a specialized charting component designed for visualizing transmission line impedance, RF circuit parameters, and antenna tuning data. It displays complex impedance or admittance on a circular grid, making it essential for RF/microwave engineering applications. The component lives in the Syncfusion.Blazor.Charts namespace and exposes the Smith Chart API surface for series, axes, legends, titles, subtitles, tooltips, export/print, and rendering events.

When to Use This Skill

Use this skill when the user needs to:

Visualize impedance matching for transmission lines and RF circuits
Plot reflection coefficients (S-parameters) on a Smith Chart
Analyze antenna tuning and resonance characteristics
Display multiple transmission lines or circuit configurations
Customize circular and radial axes for impedance/admittance visualization
Add markers and data labels to highlight critical impedance points
Enable legends to differentiate between multiple series
Show tooltips with resistance and reactance values
Export Smith Charts to image formats or print for documentation
Handle RF engineering data with resistance and reactance coordinates

Component Overview

The Smith Chart component renders data points as a series connected by lines on a circular coordinate system. Key capabilities include:

Two-axis system: Horizontal axis (straight line) and radial axis (circular path)
Series visualization: Plot multiple transmission lines or circuit configurations
Markers and data labels: Highlight specific impedance points with customizable shapes and labels
Smart labels: Automatically position labels to avoid overlaps with connector lines
Legend support: Display series names with toggle visibility
Interactive tooltips: Show resistance/reactance values on hover
Export and print: Save charts as PNG, JPEG, SVG, or PDF
Customization: Full control over colors, fonts, borders, and styling
Responsive design: Adapts to container dimensions

Component: SfSmithChart (Syncfusion.Blazor.Charts namespace)

Core API surface:

SfSmithChart for the main chart
RenderType for impedance or admittance rendering
SmithChartEvents for event wiring
SmithChartSeriesCollection and SmithChartSeries for data binding
SmithChartHorizontalAxis and SmithChartRadialAxis for axis configuration
SmithChartLegendSettings for legend placement and formatting
SmithChartTitle and SmithChartSubtitle for chart headings
SmithChartSeriesMarker, SmithChartSeriesDatalabel, SmithChartSeriesDataLabelBorder, and SmithChartSeriesTooltip for point annotations
SmithChartBorder and SmithChartMargin for layout and container styling

Common enum types:

RenderType
SmithChartAlignment
SmithChartLabelIntersectAction
AxisLabelPosition
LegendPosition
Shape
ExportType

Documentation and Navigation Guide

API Reference

📄 Read: references/api-reference.md

Use this as the authoritative Smith Chart API summary for:

SfSmithChart properties and methods
Smith Chart events and event args
Nested components, classes, and enums

Getting Started

📄 Read: references/getting-started.md

Start here for installation and initial setup:

Installing Syncfusion.Blazor.SmithChart NuGet package
Setting up Blazor Server, WebAssembly, or Web App projects
Registering services and theme references
Creating your first Smith Chart with basic data binding
Troubleshooting common setup issues

Series and Data Binding

📄 Read: references/series-and-data-binding.md

Learn how to bind data and configure series:

Structuring data with Resistance and Reactance properties
Configuring SmithChartSeries with Fill, Opacity, Width, Visible
Adding multiple series for comparison
Customizing individual series appearance
Handling complex transmission line data

Axes Configuration

📄 Read: references/axes-configuration.md

Configure horizontal and radial axes:

Understanding horizontal axis (straight line) vs radial axis (circular)
Customizing axis labels (position, font, intersection handling)
Styling axis lines and grid appearance
Controlling label visibility and placement (Inside/Outside)
Font customization (FontFamily, FontWeight, FontStyle, Size, Color)

Markers and Data Labels

📄 Read: references/markers-and-data-labels.md

Add visual markers and data labels to series points:

Enabling and customizing marker shapes (Circle, Rectangle, Triangle)
Configuring marker size, color, opacity, and borders
Displaying data labels with resistance/reactance values
Using smart labels with connector lines to avoid overlaps
Creating custom data label templates

Legend Configuration

📄 Read: references/legend-configuration.md

Display and customize legends for series identification:

Positioning legends (Top, Bottom, Left, Right, Custom)
Customizing legend shapes, colors, and borders
Configuring legend alignment and sizing
Adding legend titles with custom styling
Enabling toggle visibility to show/hide series
Organizing legends in rows and columns

Tooltips

📄 Read: references/tooltips.md

Enable interactive tooltips for data exploration:

Showing resistance and reactance values on hover
Customizing tooltip appearance (fill color, opacity, borders)
Creating custom tooltip templates
Accessing SmithChartPoint data in templates

Chart Dimensions and Titles

📄 Read: references/chart-dimensions-and-titles.md

Configure chart size, titles, and layout:

Setting chart width and height (fixed or responsive)
Adding and styling chart titles and subtitles
Configuring margins and padding
Customizing background colors
Creating responsive Smith Charts

Export, Print, Events, and Accessibility

📄 Read: references/export-print-events-accessibility.md

Export charts, handle events, and ensure accessibility:

Exporting to PNG, JPEG, SVG, and PDF formats
Printing Smith Charts for documentation
Handling component events (Loaded, SeriesRender, AxisLabelRendering, LegendRendering, TitleRendering, SubtitleRendering, TextRendering, TooltipRender, OnPrintComplete, OnExportComplete, SizeChanged)
Implementing WCAG-compliant accessible charts
Supporting keyboard navigation and screen readers
Testing accessibility compliance

Quick Start Example

Here's a basic Smith Chart showing a transmission line:

@page "/smith-chart-basic"
@using Syncfusion.Blazor.Charts

<h3>Transmission Line Impedance</h3>

<SfSmithChart>
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Transmission Line 1" 
                          DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
            <SmithChartSeriesMarker Visible="true"></SmithChartSeriesMarker>
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

@code {
    public class SmithChartData
    {
        public double? Resistance { get; set; }
        public double? Reactance { get; set; }
    }
    
    public List<SmithChartData> TransmissionData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 10, Reactance = 25 },
        new SmithChartData { Resistance = 6, Reactance = 4.5 },
        new SmithChartData { Resistance = 3.5, Reactance = 1.6 },
        new SmithChartData { Resistance = 2, Reactance = 1.2 },
        new SmithChartData { Resistance = 1, Reactance = 0.8 },
        new SmithChartData { Resistance = 0, Reactance = 0.2 }
    };
}

Common Use Cases

RF Impedance Matching Analysis

@using Syncfusion.Blazor.Charts

<SfSmithChart Height="600px" Width="100%">
    <SmithChartTitle Text="Antenna Impedance Matching"></SmithChartTitle>
    <SmithChartLegendSettings Visible="true" Position="@Syncfusion.Blazor.Charts.LegendPosition.Bottom">
    </SmithChartLegendSettings>
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Before Matching" 
                          DataSource="@BeforeData" 
                          Reactance="Reactance" 
                          Resistance="Resistance"
                          Fill="#FF6B6B">
            <SmithChartSeriesMarker Visible="true" Shape="@Syncfusion.Blazor.Charts.Shape.Circle"></SmithChartSeriesMarker>
            <SmithChartSeriesTooltip Visible="true"></SmithChartSeriesTooltip>
        </SmithChartSeries>
        <SmithChartSeries Name="After Matching" 
                          DataSource="@AfterData" 
                          Reactance="Reactance" 
                          Resistance="Resistance"
                          Fill="#4ECDC4">
            <SmithChartSeriesMarker Visible="true" Shape="@Syncfusion.Blazor.Charts.Shape.Diamond"></SmithChartSeriesMarker>
            <SmithChartSeriesTooltip Visible="true"></SmithChartSeriesTooltip>
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

@code {
    public class SmithChartData
    {
        public double? Resistance { get; set; }
        public double? Reactance { get; set; }
    }

    public List<SmithChartData> BeforeData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 10,  Reactance = 25 },
        new SmithChartData { Resistance = 6,   Reactance = 4.5 },
        new SmithChartData { Resistance = 3.5, Reactance = 1.6 },
        new SmithChartData { Resistance = 2,   Reactance = 1.2 },
        new SmithChartData { Resistance = 1,   Reactance = 0.8 },
        new SmithChartData { Resistance = 0,   Reactance = 0.2 }
    };

    public List<SmithChartData> AfterData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 2.5, Reactance = 1.2 },
        new SmithChartData { Resistance = 2, Reactance = 0.8 },
        new SmithChartData { Resistance = 1.6, Reactance = 0.5 },
        new SmithChartData { Resistance = 1.3, Reactance = 0.3 },
        new SmithChartData { Resistance = 1.1, Reactance = 0.1 },
        new SmithChartData { Resistance = 1, Reactance = 0 }
    };
}

Multiple Frequency Response Analysis

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartTitle Text="Frequency Sweep: 100MHz - 1GHz"></SmithChartTitle>
    <SmithChartLegendSettings Visible="true" Position="@Syncfusion.Blazor.Charts.LegendPosition.Right">
    </SmithChartLegendSettings>
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="100MHz" DataSource="@Freq100Data" 
                          Reactance="Reactance" Resistance="Resistance" Width="2">
        </SmithChartSeries>
        <SmithChartSeries Name="500MHz" DataSource="@Freq500Data" 
                          Reactance="Reactance" Resistance="Resistance" Width="2">
        </SmithChartSeries>
        <SmithChartSeries Name="1GHz" DataSource="@Freq1000Data" 
                          Reactance="Reactance" Resistance="Resistance" Width="2">
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

@code {
    public class SmithChartData
    {
        public double? Resistance { get; set; }
        public double? Reactance { get; set; }
    }

    public List<SmithChartData> Freq100Data = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 10,  Reactance = 20 },
        new SmithChartData { Resistance = 8,   Reactance = 12 },
        new SmithChartData { Resistance = 6,   Reactance = 6 },
        new SmithChartData { Resistance = 4,   Reactance = 3 },
        new SmithChartData { Resistance = 2,   Reactance = 1.5 },
        new SmithChartData { Resistance = 1,   Reactance = 0.8 }
    };

    public List<SmithChartData> Freq500Data = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 8,   Reactance = 15 },
        new SmithChartData { Resistance = 6,   Reactance = 8 },
        new SmithChartData { Resistance = 4.5, Reactance = 4 },
        new SmithChartData { Resistance = 3,   Reactance = 2 },
        new SmithChartData { Resistance = 1.8, Reactance = 1 },
        new SmithChartData { Resistance = 1.2, Reactance = 0.4 }
    };

    public List<SmithChartData> Freq1000Data = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 6,   Reactance = 10 },
        new SmithChartData { Resistance = 4.5, Reactance = 5 },
        new SmithChartData { Resistance = 3,   Reactance = 2.5 },
        new SmithChartData { Resistance = 2,   Reactance = 1.2 },
        new SmithChartData { Resistance = 1.2, Reactance = 0.5 },
        new SmithChartData { Resistance = 1, Reactance = 0 }
    };
}

Key Properties

Property	Type	Description	When to Use
`SmithChartSeriesCollection`	Collection	Container for all series	Always required to display data
`DataSource`	IEnumerable	List of impedance data points	Bind your resistance/reactance data
`Resistance`	string	Property name for resistance values	Map to your data model property
`Reactance`	string	Property name for reactance values	Map to your data model property
`RenderType`	Enum	Choose impedance or admittance rendering	Switch the Smith Chart coordinate interpretation
`Radius`	string	Radius of the Smith Chart plot area	Control the circular plot size
`ElementSpacing`	string	Spacing between chart elements	Tweak compact or dense layouts
`Background`	string	Chart background color	Match the host UI theme
`Theme`	string	Built-in Smith Chart theme	Keep visual styling consistent
`ID`	string	Chart element identifier	Useful for testing or scripting
`SmithChartSeriesMarker`	Component	Marker configuration	Highlight data points visually
`SmithChartSeriesTooltip`	Component	Tooltip configuration	Show values on hover
`SmithChartLegendSettings`	Component	Legend configuration	Identify multiple series
`SmithChartHorizontalAxis`	Component	Horizontal axis settings	Customize straight-line axis
`SmithChartRadialAxis`	Component	Radial axis settings	Customize circular axis
`Width`	string	Chart width (px or %)	Control chart dimensions
`Height`	string	Chart height (px or %)	Control chart dimensions

Implementation Workflow

Install Package → Add Syncfusion.Blazor.SmithChart NuGet package
Register Services → Add services in Program.cs/Startup.cs
Add Theme → Reference Syncfusion theme CSS
Prepare Data → Structure data with Resistance and Reactance properties
Add Component → Place <SfSmithChart> in your Razor page
Bind Series → Configure SmithChartSeries with DataSource
Customize → Add markers, tooltips, legends, and styling
Test → Verify data visualization and interactivity

Edge Cases and Considerations

Data Range: Smith Chart represents normalized impedance (typically 0-∞). Ensure data is appropriately normalized.
Series Visibility: With many overlapping series, use distinct colors and toggle visibility via legend.
Null Values: Use nullable double (double?) for Resistance and Reactance to handle missing data gracefully.
Performance: Large datasets (>1000 points per series) may impact rendering. Consider data sampling.
Responsive Design: Use percentage-based Width/Height or container queries for responsive layouts.
Accessibility: Always enable tooltips and ARIA labels for screen reader support in RF engineering applications.

When NOT to Use This Component

General XY Plotting: Use regular Chart component for standard Cartesian plots
Financial Data: Use Stock Chart for time-series financial data
Non-RF Data: Smith Charts are specialized for impedance/admittance; use appropriate chart types for other domains
3D Impedance: Smith Charts are 2D; complex 3D RF visualization requires different approaches

syncfusion-blazor-smith-charts

About