syncfusion-blazor-smith-charts

name	syncfusion-blazor-smith-charts
description	Implement Syncfusion Blazor Smith Chart for RF circuit analysis and transmission line impedance matching. Use this when visualizing impedance/admittance data, reflection coefficients, S-parameters, or antenna tuning in Blazor applications. This skill covers circular grid representations and RF network parameter analysis.
metadata	{"author":"Syncfusion Inc","version":"33.1.44","category":"Data Visualization"}

Implementing Smith Charts

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

1. Install Package → Add Syncfusion.Blazor.SmithChart NuGet package
2. Register Services → Add services in Program.cs/Startup.cs
3. Add Theme → Reference Syncfusion theme CSS
4. Prepare Data → Structure data with Resistance and Reactance properties
5. Add Component → Place <SfSmithChart> in your Razor page
6. Bind Series → Configure SmithChartSeries with DataSource
7. Customize → Add markers, tooltips, legends, and styling
8. 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