Syncfusion Blazor Smith Charts

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

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

Syncfusion Blazor Smith Chart - Complete API Reference

Table of Contents

• Overview
• SfSmithChart Component
• Properties
• Public Methods
• Events and Event Args
• Nested Components and Classes
• Enumerations
• Important Notes
• Basic Example

Overview

This document provides a Smith Chart focused API reference for Syncfusion Blazor Charts. It summarizes the public SfSmithChart surface, common nested components, event arguments, and enums used when working with Smith Chart-based RF and transmission line visualizations.

Namespace: Syncfusion.Blazor.Charts

---

SfSmithChart Component

SfSmithChart is the main Blazor Smith Chart component used to display impedance and admittance data in RF and microwave applications.

Properties

Public Methods

RefreshAsync(bool isUpdateData = true)

Re-renders the Smith Chart.

public Task RefreshAsync(bool isUpdateData = true)

ExportAsync(ExportType type, string fileName, PdfPageOrientation? orientation = null)

Exports the Smith Chart to the selected output format.

public Task ExportAsync(ExportType type, string fileName, PdfPageOrientation? orientation = null)

PrintAsync(ElementReference elementRef = default)

Prints the Smith Chart.

public Task PrintAsync(ElementReference elementRef = default)

---

Events and Event Args

The Smith Chart exposes events through SmithChartEvents.

Common events

• Loaded → SmithChartLoadedEventArgs
• SeriesRender → SmithChartSeriesRenderEventArgs
• AxisLabelRendering → SmithChartAxisLabelRenderEventArgs
• LegendRendering → SmithChartLegendRenderEventArgs
• TitleRendering → TitleRenderEventArgs
• SubtitleRendering → SubTitleRenderEventArgs
• TextRendering → SmithChartTextRenderEventArgs
• TooltipRender → SmithChartTooltipEventArgs
• OnExportComplete → SmithChartExportEventArgs
• OnPrintComplete → SmithChartExportEventArgs
• SizeChanged → SmithChartResizeEventArgs

Additional Smith Chart event args

• SmithChartAnimationCompleteEventArgs
• SmithChartResizeEventArgs
• SmithChartExportEventArgs
• SmithChartPoint

---

Nested Components and Classes

Chart setup

• SmithChartEvents
• SmithChartSeriesCollection
• SmithChartSeries

Axes

• SmithChartHorizontalAxis
• SmithChartRadialAxis
• SmithChartAxisLine
• SmithChartHorizontalAxisLine
• SmithChartHorizontalAxisLabelStyle
• SmithChartRadialAxisLine
• SmithChartRadialAxisLabelStyle
• SmithChartMajorGridLines
• SmithChartMinorGridLines
• SmithChartHorizontalMajorGridLines
• SmithChartHorizontalMinorGridLines
• SmithChartRadialMajorGridLines
• SmithChartRadialMinorGridLines

Series visuals

• SmithChartSeriesMarker
• SmithChartSeriesMarkerBorder
• SmithChartSeriesDatalabel
• SmithChartSeriesDataLabelBorder
• SmithChartDataLabelConnectorLine
• SmithChartDataLabelTextStyle
• SmithChartSeriesTooltip
• SmithChartSeriesTooltipBorder

Titles, legends, and layout

• SmithChartTitle
• SmithChartSubtitle
• SmithChartLegendSettings
• SmithChartLegendBorder
• SmithChartLegendItemStyle
• SmithChartLegendTitle
• SmithChartLegendTitleTextStyle
• SmithChartLegendTextStyle
• SmithChartMargin
• SmithChartBorder

Core data model

• SmithChartPoint

---

Enumerations

• RenderType - Impedance or Admittance
• SmithChartAlignment - Near, Center, Far
• SmithChartLabelIntersectAction
• AxisLabelPosition
• LegendPosition
• Shape
• ExportType

---

Important Notes

• The Smith Chart component is part of the Syncfusion.Blazor.Charts namespace.
• SmithChartSeriesDatalabel is the official Smith Chart data label component name.
• SmithChartSeriesDataLabelBorder is the official data label border helper component name.
• Smith Chart series are typically bound to resistance/reactance fields.
• Use RenderType to switch between impedance and admittance rendering.
• ExportAsync and PrintAsync are available on the component instance for programmatic output.

---

Basic Example

@page "/smithchart-api-reference"
@using Syncfusion.Blazor.Charts

<SfSmithChart RenderType="@RenderType.Impedance" Width="600px" Height="500px">
    <SmithChartTitle Text="Smith Chart API Reference Sample" Visible="true" />
    <SmithChartLegendSettings Visible="true" Position="@Syncfusion.Blazor.Charts.LegendPosition.Bottom" />

    <SmithChartEvents Loaded="OnLoaded"
                      SeriesRender="OnSeriesRender"
                      AxisLabelRendering="OnAxisLabelRendering"
                      LegendRendering="OnLegendRendering"
                      TextRendering="OnTextRendering"
                      TooltipRender="OnTooltipRender" />

    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Impedance Path"
                          DataSource="@Data"
                          Resistance="Resistance"
                          Reactance="Reactance">
            <SmithChartSeriesMarker Visible="true" Shape="@Syncfusion.Blazor.Charts.Shape.Circle" >
                <SmithChartSeriesDatalabel Visible="true">
                    <SmithChartSeriesDataLabelBorder Width="1" Color="#4F46E5" />
                </SmithChartSeriesDatalabel>
            </SmithChartSeriesMarker>
            <SmithChartSeriesTooltip Visible="true" />
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

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

    private List<SmithPoint> Data = new()
    {
        new SmithPoint { Resistance = 1.0, Reactance = 0.0 },
        new SmithPoint { Resistance = 0.8, Reactance = 0.2 },
        new SmithPoint { Resistance = 0.6, Reactance = 0.4 }
    };

    private void OnLoaded(SmithChartLoadedEventArgs args) { }
    private void OnSeriesRender(SmithChartSeriesRenderEventArgs args) { }
    private void OnAxisLabelRendering(SmithChartAxisLabelRenderEventArgs args) { }
    private void OnLegendRendering(SmithChartLegendRenderEventArgs args) { }
    private void OnTextRendering(SmithChartTextRenderEventArgs args) { }
    private void OnTooltipRender(SmithChartTooltipEventArgs args) { }
}

Axes Configuration

Table of Contents

• Overview
• Axis Types
• Label Customization
• Font Styling
• Label Positioning
• Label Intersection Handling
• Complete Examples

Overview

Smith Charts use two distinct axis types to represent impedance coordinates:

• Horizontal Axis - Straight line drawn horizontally across the chart
• Radial Axis - Circular paths radiating from the center

Both axes support extensive customization for labels, fonts, positioning, and visibility. The SmithChartHorizontalAxis and SmithChartRadialAxis components provide properties for controlling axis appearance and behavior.

Axis Types

Horizontal Axis

The horizontal axis represents constant resistance circles. The SmithChartHorizontalAxis component with its Visible property controls the axis display:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartHorizontalAxis Visible="true">
    </SmithChartHorizontalAxis>
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@Data" Reactance="Reactance" Resistance="Resistance">
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

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

    public List<SmithChartData> Data = new()
    {
        new SmithChartData { Resistance = 10,  Reactance = 15 },
        new SmithChartData { Resistance = 7,   Reactance = 8 },
        new SmithChartData { Resistance = 5,   Reactance = 4 },
        new SmithChartData { Resistance = 3,   Reactance = 2 },
        new SmithChartData { Resistance = 1.5, Reactance = 1 },
        new SmithChartData { Resistance = 1,   Reactance = 0.2 }
    };
}

Properties:

• Visible - Show/hide the axis (default: true)
• LabelPosition - Place labels inside or outside
• LabelIntersectAction - Handle overlapping labels

Radial Axis

The radial axis represents constant reactance arcs. The SmithChartRadialAxis component with its Visible property controls the axis display:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartRadialAxis Visible="true">
    </SmithChartRadialAxis>
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@Data" Reactance="Reactance" Resistance="Resistance">
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

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

    public List<SmithChartData> Data = new()
    {
        new SmithChartData { Resistance = 10,  Reactance = 15 },
        new SmithChartData { Resistance = 7,   Reactance = 8 },
        new SmithChartData { Resistance = 5,   Reactance = 4 },
        new SmithChartData { Resistance = 3,   Reactance = 2 },
        new SmithChartData { Resistance = 1.5, Reactance = 1 },
        new SmithChartData { Resistance = 1,   Reactance = 0.2 }
    };
}

Label Customization

Horizontal Axis Labels

Customize label appearance with font styling using the SmithChartHorizontalAxisLabelStyle component with properties like FontFamily, FontWeight, FontStyle, Size, Color, and Opacity:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartHorizontalAxis Visible="true" LabelPosition="@AxisLabelPosition.Outside">
        <SmithChartHorizontalAxisLabelStyle 
            FontFamily="Arial"
            FontWeight="bold"
            FontStyle="normal"
            Size="14px"
            Color="#333333"
            Opacity="1.0">
        </SmithChartHorizontalAxisLabelStyle>
    </SmithChartHorizontalAxis>
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
        </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 }
    };
}

Radial Axis Labels

Apply custom styling to radial axis labels using the SmithChartRadialAxisLabelStyle component with properties like FontFamily, FontWeight, FontStyle, Size, Color, and Opacity:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartRadialAxis Visible="true" LabelPosition="@AxisLabelPosition.Inside">
        <SmithChartRadialAxisLabelStyle 
            FontFamily="Segoe UI"
            FontWeight="600"
            FontStyle="italic"
            Size="12px"
            Color="#666666"
            Opacity="0.9">
        </SmithChartRadialAxisLabelStyle>
    </SmithChartRadialAxis>
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
        </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 }
    };
}

Font Styling

Font Properties

Both SmithChartHorizontalAxisLabelStyle and SmithChartRadialAxisLabelStyle components support these font properties:

Font Family Options

Configure the FontFamily property of label style components to set the typeface:

<!-- Professional/Technical -->
<SmithChartHorizontalAxisLabelStyle FontFamily="Segoe UI">
</SmithChartHorizontalAxisLabelStyle>

<!-- Monospace for precise values -->
<SmithChartHorizontalAxisLabelStyle FontFamily="Consolas">
</SmithChartHorizontalAxisLabelStyle>

<!-- Classic serif -->
<SmithChartHorizontalAxisLabelStyle FontFamily="Times New Roman">
</SmithChartHorizontalAxisLabelStyle>

<!-- Sans-serif modern -->
<SmithChartHorizontalAxisLabelStyle FontFamily="Arial">
</SmithChartHorizontalAxisLabelStyle>

Font Weight Examples

Control text thickness using the FontWeight property of label style components:

<!-- Light labels for background axes -->
<SmithChartRadialAxisLabelStyle FontWeight="300">
</SmithChartRadialAxisLabelStyle>

<!-- Normal weight (default) -->
<SmithChartRadialAxisLabelStyle FontWeight="normal">
</SmithChartRadialAxisLabelStyle>

<!-- Bold for emphasis -->
<SmithChartRadialAxisLabelStyle FontWeight="bold">
</SmithChartRadialAxisLabelStyle>

<!-- Extra bold -->
<SmithChartRadialAxisLabelStyle FontWeight="900">
</SmithChartRadialAxisLabelStyle>

Label Positioning

Position Options

Control where labels appear relative to axis lines using the LabelPosition property of SmithChartHorizontalAxis and SmithChartRadialAxis components:

<!-- Labels outside the chart area -->
<SmithChartHorizontalAxis LabelPosition="@AxisLabelPosition.Outside">
</SmithChartHorizontalAxis>

<!-- Labels inside the chart area -->
<SmithChartRadialAxis LabelPosition="@AxisLabelPosition.Inside">
</SmithChartRadialAxis>

`AxisLabelPosition` Enum:

• Outside - Labels placed outside axis lines (more readable, uses more space)
• Inside - Labels placed inside axis lines (compact, may overlap with data)

Positioning Strategy

Use `Outside` for:

• Primary horizontal axis with prominent values
• Charts with dense data near the perimeter
• Print/export where clarity is critical
• Large charts with ample margin space

Use `Inside` for:

• Radial axis to avoid clutter
• Compact charts with limited space
• Secondary or reference axes
• Dashboards with multiple charts

Combined Positioning Example

@using Syncfusion.Blazor.Charts

<SfSmithChart Height="600px" Width="100%">
    <SmithChartTitle Text="Optimized Label Positioning"></SmithChartTitle>
    
    <!-- Horizontal axis: Outside for readability -->
    <SmithChartHorizontalAxis LabelPosition="@AxisLabelPosition.Outside">
        <SmithChartHorizontalAxisLabelStyle 
            FontFamily="Arial"
            FontWeight="600"
            Size="13px"
            Color="#2C3E50">
        </SmithChartHorizontalAxisLabelStyle>
    </SmithChartHorizontalAxis>
    
    <!-- Radial axis: Inside to save space -->
    <SmithChartRadialAxis LabelPosition="@AxisLabelPosition.Inside">
        <SmithChartRadialAxisLabelStyle 
            FontFamily="Arial"
            FontWeight="normal"
            Size="11px"
            Color="#7F8C8D"
            Opacity="0.85">
        </SmithChartRadialAxisLabelStyle>
    </SmithChartRadialAxis>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries 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 }
    };
}

Label Intersection Handling

When labels overlap, use the LabelIntersectAction property of SmithChartHorizontalAxis and SmithChartRadialAxis components to control behavior:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartRadialAxis 
        LabelPosition="@AxisLabelPosition.Inside"
        LabelIntersectAction="@SmithChartLabelIntersectAction.Hide">
        <SmithChartRadialAxisLabelStyle Size="12px">
        </SmithChartRadialAxisLabelStyle>
    </SmithChartRadialAxis>
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
        </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 }
    };
}

`SmithChartLabelIntersectAction` Enum:

• None - Show all labels (may overlap)
• Hide - Hide overlapping labels automatically

When to Use:

`None` (Show all labels):

• Charts with sufficient space between axis values
• High-resolution displays or print outputs
• Logarithmic or sparse axis spacing

`Hide` (Auto-hide overlapping):

• Compact charts with dense axis labels
• Responsive designs where chart size varies
• Radial axes with many closely-spaced values
• Mobile/tablet viewports

Intersection Handling Example

@using Syncfusion.Blazor.Charts

<SfSmithChart Height="500px" Width="100%">
    <SmithChartRadialAxis 
        LabelPosition="@AxisLabelPosition.Inside"
        LabelIntersectAction="@SmithChartLabelIntersectAction.Hide">
        <SmithChartRadialAxisLabelStyle 
            Size="11px"
            Color="#555555">
        </SmithChartRadialAxisLabelStyle>
    </SmithChartRadialAxis>
    
    <SmithChartHorizontalAxis 
        LabelPosition="@AxisLabelPosition.Outside"
        LabelIntersectAction="@SmithChartLabelIntersectAction.None">
        <SmithChartHorizontalAxisLabelStyle 
            Size="12px"
            FontWeight="bold"
            Color="#333333">
        </SmithChartHorizontalAxisLabelStyle>
    </SmithChartHorizontalAxis>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
        </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 }
    };
}

Complete Examples

Professional Technical Documentation Style

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

<h3>RF Circuit Analysis - Professional Style</h3>

<SfSmithChart Height="700px" Width="100%">
    <SmithChartTitle Text="S11 Parameter Measurement"></SmithChartTitle>
    
    <!-- Horizontal Axis: Bold, outside placement -->
    <SmithChartHorizontalAxis 
        Visible="true"
        LabelPosition="@AxisLabelPosition.Outside"
        LabelIntersectAction="@SmithChartLabelIntersectAction.None">
        <SmithChartHorizontalAxisLabelStyle 
            FontFamily="Segoe UI"
            FontWeight="600"
            FontStyle="normal"
            Size="14px"
            Color="#1A1A1A"
            Opacity="1.0">
        </SmithChartHorizontalAxisLabelStyle>
    </SmithChartHorizontalAxis>
    
    <!-- Radial Axis: Subtle, inside placement -->
    <SmithChartRadialAxis 
        Visible="true"
        LabelPosition="@AxisLabelPosition.Inside"
        LabelIntersectAction="@SmithChartLabelIntersectAction.Hide">
        <SmithChartRadialAxisLabelStyle 
            FontFamily="Segoe UI"
            FontWeight="normal"
            FontStyle="normal"
            Size="12px"
            Color="#666666"
            Opacity="0.85">
        </SmithChartRadialAxisLabelStyle>
    </SmithChartRadialAxis>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Antenna Impedance" 
                          DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance"
                          Fill="#2E86AB"
                          Width="2.5">
            <SmithChartSeriesMarker Visible="true" 
                                    Shape="@Syncfusion.Blazor.Charts.Shape.Circle"
                                    Height="8"
                                    Width="8">
            </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 = 8, Reactance = 10 },
        new SmithChartData { Resistance = 6, Reactance = 4.5 },
        new SmithChartData { Resistance = 4.5, Reactance = 2 },
        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 }
    };
}

High Contrast Accessibility Style

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

<h3>High Contrast Accessible Smith Chart</h3>

<SfSmithChart Height="600px" Width="100%">
    <SmithChartTitle Text="Accessible Impedance Analysis"></SmithChartTitle>
    
    <!-- High contrast horizontal axis -->
    <SmithChartHorizontalAxis 
        Visible="true"
        LabelPosition="@AxisLabelPosition.Outside">
        <SmithChartHorizontalAxisLabelStyle 
            FontFamily="Arial"
            FontWeight="bold"
            Size="16px"
            Color="#000000"
            Opacity="1.0">
        </SmithChartHorizontalAxisLabelStyle>
    </SmithChartHorizontalAxis>
    
    <!-- High contrast radial axis -->
    <SmithChartRadialAxis 
        Visible="true"
        LabelPosition="@AxisLabelPosition.Inside"
        LabelIntersectAction="@SmithChartLabelIntersectAction.Hide">
        <SmithChartRadialAxisLabelStyle 
            FontFamily="Arial"
            FontWeight="600"
            Size="14px"
            Color="#000000"
            Opacity="1.0">
        </SmithChartRadialAxisLabelStyle>
    </SmithChartRadialAxis>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Measurement Data" 
                          DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance"
                          Fill="#000000"
                          Width="3">
            <SmithChartSeriesMarker Visible="true" 
                                    Shape="@Syncfusion.Blazor.Charts.Shape.Circle"
                                    Height="10"
                                    Width="10"
                                    Fill="#FFFF00">
            </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 = 8, Reactance = 10 },
        new SmithChartData { Resistance = 6, Reactance = 4.5 },
        new SmithChartData { Resistance = 4.5, Reactance = 2 },
        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 }
    };
}

Compact Dashboard Style

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

<h3>Compact Dashboard Style</h3>

<SfSmithChart Height="400px" Width="100%">
    <!-- Minimal horizontal axis -->
    <SmithChartHorizontalAxis 
        Visible="true"
        LabelPosition="@AxisLabelPosition.Outside">
        <SmithChartHorizontalAxisLabelStyle 
            FontFamily="Arial"
            FontWeight="normal"
            Size="10px"
            Color="#4A4A4A"
            Opacity="0.9">
        </SmithChartHorizontalAxisLabelStyle>
    </SmithChartHorizontalAxis>
    
    <!-- Compact radial axis -->
    <SmithChartRadialAxis 
        Visible="true"
        LabelPosition="@AxisLabelPosition.Inside"
        LabelIntersectAction="@SmithChartLabelIntersectAction.Hide">
        <SmithChartRadialAxisLabelStyle 
            FontFamily="Arial"
            FontWeight="normal"
            Size="9px"
            Color="#6A6A6A"
            Opacity="0.8">
        </SmithChartRadialAxisLabelStyle>
    </SmithChartRadialAxis>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance"
                          Width="1.5">
        </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 = 8, Reactance = 10 },
        new SmithChartData { Resistance = 6, Reactance = 4.5 },
        new SmithChartData { Resistance = 4.5, Reactance = 2 },
        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 }
    };
}

Best Practices

Label Visibility

Do:

• Use larger fonts (14-16px) for horizontal axis (primary)
• Use smaller fonts (11-13px) for radial axis (secondary)
• Apply Hide intersection action for inside-positioned labels
• Use high contrast colors (#000000, #333333) for readability

Don't:

• Use fonts smaller than 9px (hard to read)
• Set opacity below 0.7 (labels become invisible)
• Place both axes outside on small charts (wastes space)
• Use decorative fonts for technical data

Performance

• Axis rendering is optimized; customization doesn't impact performance
• Font loading: Use system fonts for faster rendering
• Label count: Smith Chart automatically manages label density

Smith Chart Dimensions and Titles

Table of Contents

• Overview
• Chart Dimensions
• Fixed Dimensions
• Percentage-Based Dimensions
• Responsive Sizing Strategies
• Title Configuration
• Basic Title
• Title Alignment
• Title Styling
• Subtitle Configuration
• Basic Subtitle
• Comprehensive Title and Subtitle Styling
• Margin and Padding
• Chart Margins
• Background Customization
• Chart Background Color
• Complete Responsive Example
• Professional RF Measurement Dashboard
• Best Practices
• Dimension Guidelines
• Title Best Practices
• Margin and Spacing
• Troubleshooting
• Chart Too Small
• Title Cut Off
• Responsive Layout Issues
• Background Not Applied

Overview

Proper configuration of Smith Chart dimensions and titles is essential for creating professional and responsive visualizations. This guide covers chart sizing using the Width and Height properties, title and subtitle configuration using SmithChartTitle and SmithChartSubtitle components, responsive design strategies, and styling options.

Chart Dimensions

Configure chart dimensions using the Width and Height properties of the SfSmithChart component.

Fixed Dimensions

Set explicit width and height for the chart using fixed pixel values with the Width and Height properties:

@page "/smithchart-fixed-dimensions"
@using Syncfusion.Blazor.Charts

<h3>Fixed Dimensions Smith Chart</h3>

<SfSmithChart Width="600px" Height="600px">
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@ImpedanceData" 
                          Name="Impedance" 
                          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> ImpedanceData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.15, Reactance = 0.15 },
        new SmithChartData { Resistance = 0.25, Reactance = 0.25 },
        new SmithChartData { Resistance = 0.35, Reactance = 0.35 },
        new SmithChartData { Resistance = 0.45, Reactance = 0.45 }
    };
}

Percentage-Based Dimensions

Use percentage values in the Width and Height properties for responsive layouts:

@page "/smithchart-percentage-dimensions"
@using Syncfusion.Blazor.Charts

<h3>Responsive Percentage-Based Dimensions</h3>

<div style="width: 100%; max-width: 1200px; margin: 0 auto;">
    <SfSmithChart Width="100%" Height="600px">
        <SmithChartTitle Text="Responsive Smith Chart" Visible="true">
        </SmithChartTitle>
        
        <SmithChartSeriesCollection>
            <SmithChartSeries DataSource="@AntennaData" 
                              Name="Antenna S11" 
                              Reactance="Reactance" 
                              Resistance="Resistance">
                <SmithChartSeriesMarker Visible="true">
                </SmithChartSeriesMarker>
            </SmithChartSeries>
        </SmithChartSeriesCollection>
        
        <SmithChartLegendSettings Visible="true" Position="Syncfusion.Blazor.Charts.LegendPosition.Bottom">
        </SmithChartLegendSettings>
    </SfSmithChart>
</div>

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

    public List<SmithChartData> AntennaData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.2, Reactance = 0.2 },
        new SmithChartData { Resistance = 0.3, Reactance = 0.3 },
        new SmithChartData { Resistance = 0.4, Reactance = 0.4 },
        new SmithChartData { Resistance = 0.5, Reactance = 0.5 }
    };
}

Responsive Sizing Strategies

Create fully responsive charts that adapt to different screen sizes using percentage values for the Width property and binding the Height property to dynamic values in the @code block:

@page "/smithchart-responsive"
@using Syncfusion.Blazor.Charts

<h3>Fully Responsive Smith Chart</h3>

<div class="chart-container">
    <SfSmithChart Width="100%" Height="@chartHeight">
        <SmithChartTitle Text="Multi-Device Responsive Chart" 
                        Visible="true"
                        TextAlignment="@SmithChartAlignment.Center">
        </SmithChartTitle>
        
        <SmithChartSeriesCollection>
            <SmithChartSeries DataSource="@FilterResponse" 
                              Name="Filter S-Parameters" 
                              Reactance="Reactance" 
                              Resistance="Resistance">
                <SmithChartSeriesMarker Visible="true" 
                                       Shape="@Syncfusion.Blazor.Charts.Shape.Circle"
                                       Height="10"
                                       Width="10">
                </SmithChartSeriesMarker>
                <SmithChartSeriesTooltip Visible="true">
                </SmithChartSeriesTooltip>
            </SmithChartSeries>
        </SmithChartSeriesCollection>
        
        <SmithChartLegendSettings Visible="true" Position="@legendPosition">
        </SmithChartLegendSettings>
    </SfSmithChart>
</div>

<style>
    .chart-container {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }

    @@media (max-width: 768px) {
        .chart-container {
            padding: 10px;
        }
    }
</style>

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

    private string chartHeight = "600px";
    private Syncfusion.Blazor.Charts.LegendPosition legendPosition = Syncfusion.Blazor.Charts.LegendPosition.Bottom;

    protected override void OnInitialized()
    {
        // Adjust based on viewport (simplified example)
        chartHeight = "600px";
        legendPosition = Syncfusion.Blazor.Charts.LegendPosition.Bottom;
    }

    public List<SmithChartData> FilterResponse = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.15, Reactance = 0.2 },
        new SmithChartData { Resistance = 0.25, Reactance = 0.25 },
        new SmithChartData { Resistance = 0.35, Reactance = 0.3 },
        new SmithChartData { Resistance = 0.45, Reactance = 0.35 },
        new SmithChartData { Resistance = 0.55, Reactance = 0.4 }
    };
}

Title Configuration

Configure chart titles using the SmithChartTitle component with properties like Text, Visible, and TextAlignment.

Basic Title

Add a title to the Smith Chart using the SmithChartTitle component with the Text property:

@page "/smithchart-basic-title"
@using Syncfusion.Blazor.Charts

<SfSmithChart Width="700px" Height="700px">
    <SmithChartTitle Text="Impedance Matching Network Analysis" 
                    Visible="true">
    </SmithChartTitle>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@MatchingData" 
                          Name="Matching Network" 
                          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> MatchingData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.2, Reactance = 0.3 },
        new SmithChartData { Resistance = 0.3, Reactance = 0.35 },
        new SmithChartData { Resistance = 0.4, Reactance = 0.4 },
        new SmithChartData { Resistance = 0.5, Reactance = 0.45 }
    };
}

Title Alignment

Control title text alignment using the TextAlignment property with SmithChartAlignment values (Near, Center, Far):

@page "/smithchart-title-alignment"
@using Syncfusion.Blazor.Charts

<h3>Title Alignment Options</h3>

<div style="margin-bottom: 20px;">
    <button @onclick="@(() => SetAlignment("Near"))">Left Align</button>
    <button @onclick="@(() => SetAlignment("Center"))">Center Align</button>
    <button @onclick="@(() => SetAlignment("Far"))">Right Align</button>
</div>

<SfSmithChart Width="800px" Height="600px">
    <SmithChartTitle Text="VNA S-Parameter Measurement" 
                    Visible="true"
                    TextAlignment="@currentAlignment">
    </SmithChartTitle>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@SParamData" 
                          Name="S11" 
                          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; }
    }

    private SmithChartAlignment currentAlignment = SmithChartAlignment.Center;

    private void SetAlignment(string alignment)
    {
        currentAlignment = alignment switch
        {
            "Near" => SmithChartAlignment.Near,
            "Center" => SmithChartAlignment.Center,
            "Far" => SmithChartAlignment.Far,
            _ => SmithChartAlignment.Center
        };
    }

    public List<SmithChartData> SParamData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.25, Reactance = 0.25 },
        new SmithChartData { Resistance = 0.35, Reactance = 0.3 },
        new SmithChartData { Resistance = 0.45, Reactance = 0.35 }
    };
}

Title Styling

Customize title appearance using the SmithChartTitleTextStyle component with font properties like FontFamily, Size, FontWeight, Color, and FontStyle:

@page "/smithchart-title-styling"
@using Syncfusion.Blazor.Charts

<h3>Styled Chart Title</h3>

<SfSmithChart Width="800px" Height="700px">
    <SmithChartTitle Text="RF Power Amplifier Input Impedance" 
                    Visible="true"
                    TextAlignment="@SmithChartAlignment.Center">
        <SmithChartTitleTextStyle FontFamily="'Segoe UI', Arial, sans-serif" 
                                 Size="20px" 
                                 FontWeight="700"
                                 Color="#1976D2"
                                 FontStyle="Normal">
        </SmithChartTitleTextStyle>
    </SmithChartTitle>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@AmplifierData" 
                          Name="Input Port" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
            <SmithChartSeriesMarker Visible="true" 
                                   Shape="@Syncfusion.Blazor.Charts.Shape.Circle"
                                   Height="10"
                                   Width="10">
            </SmithChartSeriesMarker>
        </SmithChartSeries>
    </SmithChartSeriesCollection>
    
    <SmithChartLegendSettings Visible="true" Position="Syncfusion.Blazor.Charts.LegendPosition.Bottom">
    </SmithChartLegendSettings>
</SfSmithChart>

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

    public List<SmithChartData> AmplifierData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.3, Reactance = 0.25 },
        new SmithChartData { Resistance = 0.4, Reactance = 0.3 },
        new SmithChartData { Resistance = 0.5, Reactance = 0.35 },
        new SmithChartData { Resistance = 0.6, Reactance = 0.4 }
    };
}

Subtitle Configuration

Configure chart subtitles using the SmithChartSubtitle component with properties like Text, Visible, and TextAlignment.

Basic Subtitle

Add a subtitle below the main title using the SmithChartSubtitle component with the Text property:

@page "/smithchart-subtitle"
@using Syncfusion.Blazor.Charts

<SfSmithChart Width="800px" Height="700px">
    <SmithChartTitle Text="Antenna Impedance Analysis" 
                    Visible="true"
                    TextAlignment="@SmithChartAlignment.Center">
        <SmithChartTitleTextStyle Size="18px" 
                                 FontWeight="700"
                                 Color="#2C3E50">
        </SmithChartTitleTextStyle>
        <SmithChartSubtitle Text="2.4 GHz ISM Band | Measured at 25°C" 
                       Visible="true"
                       TextAlignment="@SmithChartAlignment.Center">
            <SmithChartSubtitleTextStyle Size="13px" 
                                        FontWeight="400"
                                        Color="#7F8C8D">
            </SmithChartSubtitleTextStyle>
        </SmithChartSubtitle>
    </SmithChartTitle>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@AntennaImpedance" 
                          Name="Antenna" 
                          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> AntennaImpedance = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.2, Reactance = 0.2 },
        new SmithChartData { Resistance = 0.3, Reactance = 0.25 },
        new SmithChartData { Resistance = 0.4, Reactance = 0.3 },
        new SmithChartData { Resistance = 0.5, Reactance = 0.35 }
    };
}

Comprehensive Title and Subtitle Styling

Complete example with full styling using SmithChartTitleTextStyle and SmithChartSubtitleTextStyle components to customize font and color properties:

@page "/smithchart-complete-titles"
@using Syncfusion.Blazor.Charts

<SfSmithChart Width="900px" Height="750px">
    <SmithChartTitle Text="Bandpass Filter Design Verification" 
                    Visible="true"
                    TextAlignment="@SmithChartAlignment.Center">
        <SmithChartTitleTextStyle FontFamily="'Roboto', 'Segoe UI', sans-serif" 
                                 Size="22px" 
                                 FontWeight="700"
                                 Color="#1A237E"
                                 FontStyle="Normal">
        </SmithChartTitleTextStyle>
        <SmithChartSubtitle Text="Three-Pole Chebyshev Response | 900 MHz Center Frequency | 0.1 dB Ripple" 
                       Visible="true"
                       TextAlignment="@SmithChartAlignment.Center">
            <SmithChartSubtitleTextStyle FontFamily="'Roboto', 'Segoe UI', sans-serif" 
                                        Size="14px" 
                                        FontWeight="400"
                                        Color="#5C6BC0"
                                        FontStyle="Italic">
            </SmithChartSubtitleTextStyle>
        </SmithChartSubtitle>
    </SmithChartTitle>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@InputPort" 
                          Name="Input Port (S11)" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
            <SmithChartSeriesMarker Visible="true" 
                                   Shape="@Syncfusion.Blazor.Charts.Shape.Circle"
                                   Height="10"
                                   Width="10"
                                   Fill="#E91E63">
            </SmithChartSeriesMarker>
            <SmithChartSeriesTooltip Visible="true">
            </SmithChartSeriesTooltip>
        </SmithChartSeries>
        
        <SmithChartSeries DataSource="@OutputPort" 
                          Name="Output Port (S22)" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
            <SmithChartSeriesMarker Visible="true" 
                                   Shape="@Syncfusion.Blazor.Charts.Shape.Diamond"
                                   Height="10"
                                   Width="10"
                                   Fill="#2196F3">
            </SmithChartSeriesMarker>
            <SmithChartSeriesTooltip Visible="true">
            </SmithChartSeriesTooltip>
        </SmithChartSeries>
    </SmithChartSeriesCollection>
    
    <SmithChartLegendSettings Visible="true" 
                             Position="Syncfusion.Blazor.Charts.LegendPosition.Bottom"
                             Alignment="@SmithChartAlignment.Center">
    </SmithChartLegendSettings>
</SfSmithChart>

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

    public List<SmithChartData> InputPort = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.15, Reactance = 0.2 },
        new SmithChartData { Resistance = 0.2, Reactance = 0.22 },
        new SmithChartData { Resistance = 0.25, Reactance = 0.24 },
        new SmithChartData { Resistance = 0.3, Reactance = 0.26 },
        new SmithChartData { Resistance = 0.35, Reactance = 0.28 }
    };

    public List<SmithChartData> OutputPort = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.2, Reactance = 0.15 },
        new SmithChartData { Resistance = 0.25, Reactance = 0.18 },
        new SmithChartData { Resistance = 0.3, Reactance = 0.21 },
        new SmithChartData { Resistance = 0.35, Reactance = 0.24 },
        new SmithChartData { Resistance = 0.4, Reactance = 0.27 }
    };
}

Margin and Padding

Chart Margins

Control spacing around the chart using the SmithChartMargin component with properties Left, Right, Top, and Bottom:

@page "/smithchart-margins"
@using Syncfusion.Blazor.Charts

<div style="border: 2px solid #E0E0E0; padding: 20px;">
    <SfSmithChart Width="700px" Height="700px">
        <SmithChartMargin Left="50" Right="50" Top="40" Bottom="40">
        </SmithChartMargin>
        
        <SmithChartTitle Text="Chart with Custom Margins" 
                        Visible="true"
                        TextAlignment="@SmithChartAlignment.Center">
        </SmithChartTitle>
        
        <SmithChartSeriesCollection>
            <SmithChartSeries DataSource="@TestData" 
                              Name="Test Series" 
                              Reactance="Reactance" 
                              Resistance="Resistance">
                <SmithChartSeriesMarker Visible="true">
                </SmithChartSeriesMarker>
            </SmithChartSeries>
        </SmithChartSeriesCollection>
    </SfSmithChart>
</div>

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

    public List<SmithChartData> TestData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.2, Reactance = 0.2 },
        new SmithChartData { Resistance = 0.4, Reactance = 0.3 },
        new SmithChartData { Resistance = 0.6, Reactance = 0.4 }
    };
}

Background Customization

Chart Background Color

Customize the chart background using the Background property of the SfSmithChart component:

@page "/smithchart-background"
@using Syncfusion.Blazor.Charts

<SfSmithChart Width="800px" Height="700px" Background="#F5F5F5">
    <SmithChartTitle Text="Custom Background Color" 
                    Visible="true"
                    TextAlignment="@SmithChartAlignment.Center">
        <SmithChartTitleTextStyle Size="18px" 
                                 FontWeight="700"
                                 Color="#333333">
        </SmithChartTitleTextStyle>
    </SmithChartTitle>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@SignalData" 
                          Name="RF Signal" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
            <SmithChartSeriesMarker Visible="true" 
                                   Shape="@Syncfusion.Blazor.Charts.Shape.Circle"
                                   Height="10"
                                   Width="10"
                                   Fill="#FF6B6B">
            </SmithChartSeriesMarker>
        </SmithChartSeries>
    </SmithChartSeriesCollection>
    
    <SmithChartLegendSettings Visible="true" Position="Syncfusion.Blazor.Charts.LegendPosition.Bottom">
    </SmithChartLegendSettings>
</SfSmithChart>

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

    public List<SmithChartData> SignalData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.25, Reactance = 0.25 },
        new SmithChartData { Resistance = 0.35, Reactance = 0.3 },
        new SmithChartData { Resistance = 0.45, Reactance = 0.35 },
        new SmithChartData { Resistance = 0.55, Reactance = 0.4 }
    };
}

Complete Responsive Example

Professional RF Measurement Dashboard

Complete example combining Width, Height, SmithChartMargin, SmithChartTitle, SmithChartSubtitle, and Background properties:

@page "/smithchart-professional-dashboard"
@using Syncfusion.Blazor.Charts

<div class="dashboard-container">
    <SfSmithChart Width="100%" Height="@chartHeight" Background="#FAFAFA">
        <SmithChartMargin Left="30" Right="30" Top="20" Bottom="20">
        </SmithChartMargin>
        
        <SmithChartTitle Text="RF Component Characterization Laboratory" 
                        Visible="true"
                        TextAlignment="@SmithChartAlignment.Center">
            <SmithChartTitleTextStyle FontFamily="'Inter', 'Segoe UI', sans-serif" 
                                     Size="20px" 
                                     FontWeight="700"
                                     Color="#1E293B">
            </SmithChartTitleTextStyle>
            <SmithChartSubtitle Text="Vector Network Analyzer Sweep: 100 MHz - 6 GHz | Reference Impedance: 50Ω" 
                           Visible="true"
                           TextAlignment="@SmithChartAlignment.Center">
                <SmithChartSubtitleTextStyle FontFamily="'Inter', 'Segoe UI', sans-serif" 
                                            Size="13px" 
                                            FontWeight="400"
                                            Color="#64748B">
                </SmithChartSubtitleTextStyle>
            </SmithChartSubtitle>
        </SmithChartTitle>
        
        <SmithChartSeriesCollection>
            <SmithChartSeries DataSource="@Measured_S11" 
                              Name="Measured S11" 
                              Reactance="Reactance" 
                              Resistance="Resistance">
                <SmithChartSeriesMarker Visible="true" 
                                       Shape="@Syncfusion.Blazor.Charts.Shape.Circle"
                                       Height="9"
                                       Width="9"
                                       Fill="#10B981">
                    <SmithChartSeriesMarkerBorder Width="2" Color="#059669">
                    </SmithChartSeriesMarkerBorder>
                </SmithChartSeriesMarker>
                <SmithChartSeriesTooltip Visible="true"
                                        Fill="#333333"
                                        Opacity="0.98">
                    <SmithChartSeriesTooltipBorder Width="2" Color="#10B981">
                    </SmithChartSeriesTooltipBorder>
                </SmithChartSeriesTooltip>
            </SmithChartSeries>
            
            <SmithChartSeries DataSource="@Simulated_S11" 
                              Name="Simulated S11" 
                              Reactance="Reactance" 
                              Resistance="Resistance">
                <SmithChartSeriesMarker Visible="true" 
                                       Shape="@Syncfusion.Blazor.Charts.Shape.Diamond"
                                       Height="9"
                                       Width="9"
                                       Fill="#3B82F6">
                    <SmithChartSeriesMarkerBorder Width="2" Color="#2563EB">
                    </SmithChartSeriesMarkerBorder>
                </SmithChartSeriesMarker>
                <SmithChartSeriesTooltip Visible="true"
                                        Fill="#333333"
                                        Opacity="0.98">
                    <SmithChartSeriesTooltipBorder Width="2" Color="#3B82F6">
                    </SmithChartSeriesTooltipBorder>
                </SmithChartSeriesTooltip>
            </SmithChartSeries>
        </SmithChartSeriesCollection>
        
        <SmithChartLegendSettings Visible="true" 
                                 Position="Syncfusion.Blazor.Charts.LegendPosition.Bottom"
                                 Alignment="@SmithChartAlignment.Center"
                                 ItemPadding="20">
            <SmithChartLegendTextStyle FontFamily="'Inter', 'Segoe UI', sans-serif" 
                                      Size="13px" 
                                      FontWeight="500"
                                      Color="#475569">
            </SmithChartLegendTextStyle>
        </SmithChartLegendSettings>
    </SfSmithChart>
</div>

<style>
    .dashboard-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    @@media (max-width: 768px) {
        .dashboard-container {
            padding: 15px;
        }
    }
</style>

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

    private string chartHeight = "700px";

    public List<SmithChartData> Measured_S11 = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.18, Reactance = 0.22 },
        new SmithChartData { Resistance = 0.23, Reactance = 0.25 },
        new SmithChartData { Resistance = 0.28, Reactance = 0.28 },
        new SmithChartData { Resistance = 0.33, Reactance = 0.31 },
        new SmithChartData { Resistance = 0.38, Reactance = 0.34 },
        new SmithChartData { Resistance = 0.43, Reactance = 0.37 }
    };

    public List<SmithChartData> Simulated_S11 = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 0.2, Reactance = 0.2 },
        new SmithChartData { Resistance = 0.25, Reactance = 0.24 },
        new SmithChartData { Resistance = 0.3, Reactance = 0.28 },
        new SmithChartData { Resistance = 0.35, Reactance = 0.32 },
        new SmithChartData { Resistance = 0.4, Reactance = 0.36 },
        new SmithChartData { Resistance = 0.45, Reactance = 0.4 }
    };
}

Best Practices

Dimension Guidelines

1. Square aspect ratio: Smith Charts work best with equal width and height 2. Minimum size: Use at least 400x400px for readability 3. Responsive design: Use percentage widths with fixed heights 4. Container constraints: Wrap charts in containers with max-width

Title Best Practices

1. Clear and concise: Keep titles descriptive but brief 2. Hierarchy: Use larger, bolder fonts for titles 3. Subtitles: Provide context with measurement conditions 4. Alignment: Center alignment is standard for technical charts 5. Color: Use dark colors for good contrast

Margin and Spacing

1. Adequate margins: Provide 30-50px margins for professional appearance 2. Legend space: Account for legend when setting dimensions 3. Title space: Ensure sufficient top margin for title and subtitle 4. Consistent spacing: Maintain uniform margins

Troubleshooting

Chart Too Small

Problem: Chart appears cramped or unreadable. Solution: Increase dimensions:

<SfSmithChart Width="800px" Height="800px">

Title Cut Off

Problem: Title text is truncated. Solution: Increase top margin:

<SmithChartMargin Top="60">
</SmithChartMargin>

Responsive Layout Issues

Problem: Chart doesn't resize properly. Solution: Use container with percentage width:

<div style="width: 100%; max-width: 1000px;">
    <SfSmithChart Width="100%" Height="700px">
    </SfSmithChart>
</div>

Background Not Applied

Problem: Background color not showing. Solution: Ensure Background property is set:

<SfSmithChart Background="#F5F5F5">

Export, Print, Events, and Accessibility

Table of Contents

• Overview
• Export Functionality
• Print Functionality
• Events
• Accessibility
• Testing and Validation

Overview

This guide covers advanced Smith Chart features including:

• Export - Save charts as PNG, JPEG, SVG, or PDF
• Print - Print charts directly from the browser
• Events - Handle chart lifecycle and user interaction events
• Accessibility - Ensure WCAG 2.1 AA compliance for all users

Export Functionality

The Export Functionality provides methods to save Smith Charts in multiple formats using the ExportAsync method with the ExportType enumeration property, which accepts values: PNG, JPEG, SVG, and PDF. The filename parameter specifies the exported file name.

Export as PNG

Export Smith Chart as PNG image using ExportType.PNG property for standard raster format export:

@page "/export-png"
@using Syncfusion.Blazor.Charts

<h3>Export Smith Chart as PNG</h3>

<button @onclick="ExportPNG">Export as PNG</button>

<SfSmithChart @ref="smithChart" Height="600px" Width="100%">
    <SmithChartTitle Text="Impedance Analysis"></SmithChartTitle>
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
            <SmithChartSeriesMarker Visible="true"></SmithChartSeriesMarker>
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

@code {
    private SfSmithChart smithChart;
    
    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 }
    };
    
    private async Task ExportPNG()
    {
        await smithChart.ExportAsync(Syncfusion.Blazor.Charts.ExportType.PNG, "SmithChart");
    }
}

Export as JPEG

Export Smith Chart with ExportType.JPEG property for compressed raster format export with reduced file sizes:

@using Syncfusion.Blazor.Charts

<button @onclick="ExportJPEG">Export as JPEG</button>

<SfSmithChart @ref="smithChart">
    <!-- Chart configuration -->
</SfSmithChart>

@code {
    private SfSmithChart smithChart;
    
    private async Task ExportJPEG()
    {
        await smithChart.ExportAsync(Syncfusion.Blazor.Charts.ExportType.JPEG, "SmithChart");
    }
}

Export as SVG

Export Smith Chart with ExportType.SVG property as scalable vector graphics for infinitely scalable, editable format suitable for high-quality prints:

@using Syncfusion.Blazor.Charts

<button @onclick="ExportSVG">Export as SVG</button>

<SfSmithChart @ref="smithChart">
    <!-- Chart configuration -->
</SfSmithChart>

@code {
    private SfSmithChart smithChart;
    
    private async Task ExportSVG()
    {
        await smithChart.ExportAsync(Syncfusion.Blazor.Charts.ExportType.SVG, "SmithChart");
    }
}

SVG Benefits:

• Infinite scaling without quality loss
• Smaller file sizes for simple charts
• Editable in vector graphics software
• Ideal for technical publications

Export as PDF

Export Smith Chart with ExportType.PDF property directly to portable document format for seamless document integration:

@using Syncfusion.Blazor.Charts

<button @onclick="ExportPDF">Export as PDF</button>

<SfSmithChart @ref="smithChart">
    <!-- Chart configuration -->
</SfSmithChart>

@code {
    private SfSmithChart smithChart;
    
    private async Task ExportPDF()
    {
        await smithChart.ExportAsync(Syncfusion.Blazor.Charts.ExportType.PDF, "SmithChart");
    }
}

Export with Custom Options

Custom Export Options allows developers to dynamically select export format using the ExportType property and customize the filename parameter before triggering the ExportAsync method.

@page "/export-custom"
@using Syncfusion.Blazor.Charts

<h3>Custom Export Options</h3>

<div>
    <label>Format:</label>
    <select @onchange="OnFormatChange">
        <option value="PNG">PNG</option>
        <option value="JPEG">JPEG</option>
        <option value="SVG">SVG</option>
        <option value="PDF">PDF</option>
    </select>
    
    <label>Filename:</label>
    <input type="text" @bind="fileName" />
    
    <button @onclick="ExportChart">Export</button>
</div>

<SfSmithChart @ref="smithChart" Height="600px" Width="100%">
    <SmithChartTitle Text="RF Impedance Measurement"></SmithChartTitle>
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
            <SmithChartSeriesMarker Visible="true"></SmithChartSeriesMarker>
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

@code {
    private SfSmithChart smithChart;
    private Syncfusion.Blazor.Charts.ExportType exportFormat = Syncfusion.Blazor.Charts.ExportType.PNG;
    private string fileName = "SmithChart_Export";
    
    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 }
    };
    
    private void OnFormatChange(Microsoft.AspNetCore.Components.ChangeEventArgs e)
    {
        exportFormat = Enum.Parse<Syncfusion.Blazor.Charts.ExportType>(e.Value.ToString());
    }
    
    private async Task ExportChart()
    {
        await smithChart.ExportAsync(exportFormat, fileName);
    }
}

Print Functionality

Print Functionality enables direct printing of Smith Charts through the browser's print dialog using the PrintAsync method, which respects chart dimensions and styling while excluding page UI elements from the print output.

Basic Print

Print Smith Chart using the PrintAsync method to invoke the browser's print dialog for immediate output:

@page "/print-chart"
@using Syncfusion.Blazor.Charts

<h3>Print Smith Chart</h3>

<button @onclick="PrintChart">Print Chart</button>

<SfSmithChart @ref="smithChart" Height="600px" Width="100%">
    <SmithChartTitle Text="Antenna Impedance Analysis"></SmithChartTitle>
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
            <SmithChartSeriesMarker Visible="true"></SmithChartSeriesMarker>
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

@code {
    private SfSmithChart smithChart;
    
    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 }
    };
    
    private async Task PrintChart()
    {
        await smithChart.PrintAsync();
    }
}

Print Features:

• Opens browser print dialog
• Prints only the chart (excludes page UI elements)
• Respects chart dimensions and styling
• Compatible with PDF printers for document generation

Events

Events in Smith Charts are configured through the SmithChartEvents component, which provides event handler properties such as Loaded, SeriesRender, AxisLabelRendering, and LegendRendering to respond to chart lifecycle and user interaction events.

Loaded Event

The Loaded event fires when Smith Chart completes rendering, triggered via the SmithChartEvents.Loaded property with SmithChartLoadedEventArgs parameter:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartEvents Loaded="OnChartLoaded"></SmithChartEvents>
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
        </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 }
    };

    private void OnChartLoaded(SmithChartLoadedEventArgs args)
    {
        // Chart has finished loading
        Console.WriteLine("Smith Chart loaded successfully");
        // Perform post-load operations
    }
}

Use Cases:

• Initialize chart-dependent features
• Log chart load times for performance monitoring
• Trigger data refresh or animations
• Enable export/print buttons after load

SeriesRender Event

The SeriesRender event fires after each series completes rendering, triggered via the SmithChartEvents.SeriesRender property with SmithChartSeriesRenderEventArgs parameter containing series information:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartEvents SeriesRender="OnSeriesRender"></SmithChartEvents>
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Series 1" DataSource="@Data1" 
                          Reactance="Reactance" Resistance="Resistance">
        </SmithChartSeries>
        <SmithChartSeries Name="Series 2" DataSource="@Data2" 
                          Reactance="Reactance" Resistance="Resistance">
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

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

    public List<SmithChartData> Data1 = new()
    {
        new SmithChartData { Resistance = 10, Reactance = 20 },
        new SmithChartData { Resistance = 7,  Reactance = 10 },
        new SmithChartData { Resistance = 5,  Reactance = 5 },
        new SmithChartData { Resistance = 3,  Reactance = 2 },
        new SmithChartData { Resistance = 1,  Reactance = 0.5 }
    };

    public List<SmithChartData> Data2 = new()
    {
        new SmithChartData { Resistance = 8,  Reactance = 15 },
        new SmithChartData { Resistance = 6,  Reactance = 8 },
        new SmithChartData { Resistance = 4,  Reactance = 3 },
        new SmithChartData { Resistance = 2,  Reactance = 1 },
        new SmithChartData { Resistance = 1,  Reactance = 0 }
    };

    private void OnSeriesRender(SmithChartSeriesRenderEventArgs args)
    {
        Console.WriteLine($"Series rendered: {args.Text}");
    }
}

Use Cases:

• Track rendering progress for multiple series
• Apply series-specific customizations
• Validate series data after rendering

AxisLabelRendering Event

The AxisLabelRendering event fires when an axis label is being rendered, triggered via the SmithChartEvents.AxisLabelRendering property with SmithChartAxisLabelRenderEventArgs parameter for label customization:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartEvents AxisLabelRendering="OnAxisLabelRendering"></SmithChartEvents>
    <SmithChartSeriesCollection>
        <SmithChartSeries DataSource="@TransmissionData" 
                          Reactance="Reactance" Resistance="Resistance">
        </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 }
    };

    private void OnAxisLabelRendering(SmithChartAxisLabelRenderEventArgs args)
    {
        // Axis label rendering in progress
        Console.WriteLine("Axis label rendering");
    }
}

LegendRendering Event

The LegendRendering event fires before the legend renders, triggered via the SmithChartEvents.LegendRendering property with SmithChartLegendRenderEventArgs parameter to allow legend customization:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartEvents LegendRendering="OnLegendRendering"></SmithChartEvents>
    <SmithChartLegendSettings Visible="true"></SmithChartLegendSettings>
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Transmission Line" DataSource="@TransmissionData" 
                          Reactance="Reactance" Resistance="Resistance">
        </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 }
    };

    private void OnLegendRendering(SmithChartLegendRenderEventArgs args)
    {
        // Customize legend before rendering
        Console.WriteLine($"Legend rendering for: {args.Text}");
    }
}

Complete Event Example

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

<h3>Smith Chart with Event Handlers</h3>

<div style="margin-bottom: 20px;">
    <h4>Event Log:</h4>
    <ul>
        @foreach (var log in eventLogs)
        {
            <li>@log</li>
        }
    </ul>
</div>

<SfSmithChart>
    <SmithChartEvents 
        Loaded="OnChartLoaded"
        SeriesRender="OnSeriesRender"
        AxisLabelRendering="OnAxisLabelRendering"
        LegendRendering="OnLegendRendering">
    </SmithChartEvents>
    
    <SmithChartLegendSettings Visible="true"></SmithChartLegendSettings>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Before Matching" DataSource="@BeforeData" 
                          Reactance="Reactance" Resistance="Resistance">
        </SmithChartSeries>
        <SmithChartSeries Name="After Matching" DataSource="@AfterData" 
                          Reactance="Reactance" Resistance="Resistance">
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

@code {
    private List<string> eventLogs = new();

    private bool loadedCalled;
    private int seriesRenderCount;
    private bool axisLabelCalled;
    private bool legendCalled;
    private bool stateUpdated;

    private const int ExpectedSeriesCount = 2;
    
    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 }
    };
    
    public List<SmithChartData> AfterData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 5, Reactance = 2 },
        new SmithChartData { Resistance = 3, Reactance = 1.2 },
        new SmithChartData { Resistance = 1.5, Reactance = 0.5 }
    };
    
    private void OnChartLoaded(SmithChartLoadedEventArgs args)
    {
        loadedCalled = true;
        eventLogs.Add($"{DateTime.Now:HH:mm:ss} - Chart loaded");
        CheckAndUpdateState();
    }

    private void OnSeriesRender(SmithChartSeriesRenderEventArgs args)
    {
        seriesRenderCount++;
        eventLogs.Add($"{DateTime.Now:HH:mm:ss} - Series rendered: {args.Text}");
        CheckAndUpdateState();
    }

    private void OnAxisLabelRendering(SmithChartAxisLabelRenderEventArgs args)
    {
        axisLabelCalled = true;
        eventLogs.Add($"{DateTime.Now:HH:mm:ss} - Axis label rendering");
        CheckAndUpdateState();
    }

    private void OnLegendRendering(SmithChartLegendRenderEventArgs args)
    {
        legendCalled = true;
        eventLogs.Add($"{DateTime.Now:HH:mm:ss} - Legend rendering: {args.Text}");
        CheckAndUpdateState();
    }

    private void CheckAndUpdateState()
    {
        if (stateUpdated)
            return;

        if (loadedCalled &&
            axisLabelCalled &&
            legendCalled &&
            seriesRenderCount == ExpectedSeriesCount)
        {
            stateUpdated = true;

            _ = InvokeAsync(() =>
            {
                StateHasChanged();
            });
        }
    }
}

Accessibility

Accessibility features ensure Smith Charts are usable by all users through support for keyboard navigation, screen readers, high contrast modes, and color-blind friendly design. The SmithChartSeriesMarker.Visible property controls marker visibility, and ARIA attributes can be applied to the chart component.

WCAG 2.1 AA Compliance

Smith Charts should meet WCAG 2.1 Level AA standards through proper implementation of accessibility properties and features:

Perceivable:

• Sufficient color contrast (4.5:1 for text, 3:1 for graphics)
• Alternative text for data visualization
• Visible focus indicators

Operable:

• Keyboard navigation support
• No keyboard traps
• Sufficient time for interactions

Understandable:

• Clear labels and instructions
• Consistent navigation
• Error identification

Robust:

• Semantic HTML structure
• ARIA attributes for screen readers
• Compatible with assistive technologies

Keyboard Navigation

Keyboard Navigation support is enabled by default with the tabindex="0" attribute. Smith Charts support keyboard navigation through Tab, Arrow Keys, Enter/Space, and Escape keys:

Implementation using `SmithChartSeriesMarker.Visible` property:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartTitle Text="Antenna Impedance"></SmithChartTitle>
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Measurement Data" 
                          DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
            <SmithChartSeriesMarker Visible="true"></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> 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 }
    };
}

Screen Reader Support

Screen Reader Support is provided through ARIA attributes including role="img", aria-label, aria-describedby, and tabindex properties applied to the SfSmithChart component for accessibility:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    
    <SmithChartTitle Text="Transmission Line Impedance"></SmithChartTitle>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Impedance Trace" 
                          DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

<div id="chart-description">
    This Smith Chart shows the impedance matching progression for a transmission line,
    starting at 10 Ohms resistance and 25 Ohms reactance, ending near perfect match at the center.
</div>

@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 }
    };
}

ARIA Attributes:

• role="img" - Identifies chart as an image
• aria-label - Brief chart description
• aria-describedby - Links to detailed description
• tabindex="0" - Makes chart keyboard focusable

High Contrast Support

High Contrast Support is configured through the SmithChartSeries.Fill property, SmithChartSeriesMarker.Width property for border thickness, and SmithChartSeriesMarkerBorder.Color property to ensure visibility in high contrast themes:

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartTitle Text="High Contrast Smith Chart"></SmithChartTitle>
    
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Data Series" 
                          DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance"
                          Fill="#FFFF00"
                          Width="3">
            <SmithChartSeriesMarker Visible="true"
                                    Shape="@Syncfusion.Blazor.Charts.Shape.Circle"
                                    Height="10"
                                    Width="10"
                                    Fill="#FFFF00">
                <SmithChartSeriesMarkerBorder Color="#000000" Width="2">
                </SmithChartSeriesMarkerBorder>
            </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 }
    };
}

High Contrast Guidelines:

• Use bold line widths (3-4px)
• Large markers (10-12px)
• Strong borders on markers
• High contrast color combinations
• Avoid relying solely on color to convey information

Color Blindness Considerations

Color Blindness Considerations are addressed by using accessible color palettes through the SmithChartSeries.Fill property and combining colors with different SmithChartSeriesMarker.Shape properties (Circle, Diamond, Rectangle) for visual differentiation:

// Color-blind friendly palette
private readonly string[] AccessibleColors = new[]
{
    "#0173B2", // Blue
    "#DE8F05", // Orange
    "#029E73", // Green
    "#CC78BC", // Purple
    "#CA9161", // Brown
    "#FBAFE4"  // Pink
};

Best Practices:

• Combine color with patterns/shapes
• Use different marker shapes for series
• Add data labels or tooltips
• Test with color blindness simulators
• Provide alternative data views

Testing and Validation

Testing and Validation ensures Smith Charts meet accessibility standards through manual testing of keyboard navigation, screen reader compatibility, and ARIA attributes, along with automated testing using accessibility tools.

Accessibility Testing Checklist

Testing and validation of accessibility features using keyboard navigation (Tab key), screen reader announcements through ARIA properties, browser zoom support, color contrast verification, and ARIA attribute validation:

Manual Testing:

• [ ] Navigate chart using only keyboard (Tab key navigation)
• [ ] Verify screen reader announcements with ARIA attributes
• [ ] Test with browser zoom (200-400%)
• [ ] Check color contrast ratios using SmithChartSeries.Fill properties
• [ ] Verify visible focus indicators with tabindex property
• [ ] Test with high contrast mode using SmithChartSeriesMarkerBorder.Color
• [ ] Validate ARIA attributes (role, aria-label, aria-describedby)

Automated Testing Tools:

• axe DevTools - Browser extension for accessibility scanning
• WAVE - Web accessibility evaluation tool
• Lighthouse - Chrome DevTools audit
• NVDA/JAWS - Screen reader testing

Validation Example

Validation Example demonstrates WCAG 2.1 AA compliance using the SmithChartSeriesMarker.Shape property for different marker types, SmithChartSeries.Fill property for color-blind friendly colors, and ARIA attributes for screen reader support:

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

<h1 id="page-title">Accessible Smith Chart Example</h1>

<div role="region" aria-labelledby="page-title">
    <SfSmithChart>
        
        <SmithChartTitle Text="Antenna Impedance vs Frequency"></SmithChartTitle>
        
        <SmithChartLegendSettings Visible="true" Position="@Syncfusion.Blazor.Charts.LegendPosition.Bottom">
        </SmithChartLegendSettings>
        
        <SmithChartSeriesCollection>
            <SmithChartSeries Name="100 MHz" 
                              DataSource="@Freq100" 
                              Reactance="Reactance" 
                              Resistance="Resistance"
                              Fill="#0173B2"
                              Width="3">
                <SmithChartSeriesMarker Visible="true"
                                        Shape="@Syncfusion.Blazor.Charts.Shape.Circle"
                                        Height="10"
                                        Width="10">
                </SmithChartSeriesMarker>
                <SmithChartSeriesTooltip Visible="true"></SmithChartSeriesTooltip>
            </SmithChartSeries>
            
            <SmithChartSeries Name="500 MHz" 
                              DataSource="@Freq500" 
                              Reactance="Reactance" 
                              Resistance="Resistance"
                              Fill="#DE8F05"
                              Width="3">
                <SmithChartSeriesMarker Visible="true"
                                        Shape="@Syncfusion.Blazor.Charts.Shape.Diamond"
                                        Height="10"
                                        Width="10">
                </SmithChartSeriesMarker>
                <SmithChartSeriesTooltip Visible="true"></SmithChartSeriesTooltip>
            </SmithChartSeries>
            
            <SmithChartSeries Name="1 GHz" 
                              DataSource="@Freq1000" 
                              Reactance="Reactance" 
                              Resistance="Resistance"
                              Fill="#029E73"
                              Width="3">
                <SmithChartSeriesMarker Visible="true"
                                        Shape="@Syncfusion.Blazor.Charts.Shape.Rectangle"
                                        Height="10"
                                        Width="10">
                </SmithChartSeriesMarker>
                <SmithChartSeriesTooltip Visible="true"></SmithChartSeriesTooltip>
            </SmithChartSeries>
        </SmithChartSeriesCollection>
    </SfSmithChart>
    
    <div id="chart-details" class="sr-only">
        This Smith Chart displays antenna impedance measurements across three frequency points:
        100 MHz (blue circles), 500 MHz (orange diamonds), and 1 GHz (green rectangles).
        The impedance values progress from higher resistance and reactance at lower frequencies
        toward improved matching at higher frequencies.
    </div>
</div>

<style>
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
</style>

@code {
    public class SmithChartData
    {
        public double? Resistance { get; set; }
        public double? Reactance { get; set; }
    }
    
    public List<SmithChartData> Freq100 = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 10, Reactance = 25 },
        new SmithChartData { Resistance = 6, Reactance = 4.5 },
        new SmithChartData { Resistance = 3.5, Reactance = 1.6 }
    };
    
    public List<SmithChartData> Freq500 = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 8, Reactance = 15 },
        new SmithChartData { Resistance = 5, Reactance = 3 },
        new SmithChartData { Resistance = 2.5, Reactance = 1.2 }
    };
    
    public List<SmithChartData> Freq1000 = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 6, Reactance = 10 },
        new SmithChartData { Resistance = 4, Reactance = 2 },
        new SmithChartData { Resistance = 2, Reactance = 0.8 }
    };
}

Best Practices

Export Best Practices

Export Best Practices recommend using the appropriate ExportType property based on requirements and performance considerations:

Format Selection using `ExportType` property:

• PNG - ExportType.PNG for general purpose, good quality, larger files
• JPEG - ExportType.JPEG for smaller files, slight quality loss, no transparency
• SVG - ExportType.SVG for scalable, editable format, best for publications
• PDF - ExportType.PDF for direct document integration, print-ready output

Performance:

• Export after chart fully loads using Loaded event property
• Avoid frequent exports (adds overhead)
• Consider server-side export for batch operations

Event Handling

Event Handling best practices using SmithChartEvents properties for proper initialization and state management:

Do:

• Use SmithChartEvents properties for initialization and state management
• Log events for debugging during development
• Keep event handlers lightweight
• Use async/await for long-running operations in ExportAsync and PrintAsync methods

Don't:

• Trigger expensive operations in event handler properties
• Modify chart state during SeriesRender, AxisLabelRendering, or LegendRendering events
• Create event handler infinite loops

Accessibility Compliance

Accessibility Compliance requirements using Smith Chart properties and ARIA attributes:

Requirements:

• Add aria-label and aria-describedby to SfSmithChart component
• Provide keyboard navigation support with tabindex="0" property
• Test with screen readers for ARIA attribute announcements
• Ensure 4.5:1 color contrast using SmithChartSeries.Fill and SmithChartSeriesMarkerBorder.Color
• Support high contrast modes with bold SmithChartSeriesMarker.Width properties
• Include text alternatives for data using aria-describedby and descriptive role attributes

Getting Started with Smith Charts

Table of Contents

• Prerequisites
• Installation
• Step 1: Install NuGet Package
• Step 2: Register Syncfusion Services
• Step 3: Add Theme References
• Step 4: Add Script Reference (Optional)
• Your First Smith Chart
• Multiple Series Example
• Troubleshooting
• Smith Chart Not Rendering
• License Key Warnings
• Data Not Displaying
• Theme Not Applied

This guide covers installation, configuration, and creating your first Smith Chart in Blazor Server, Blazor WebAssembly, and Blazor Web App projects.

Prerequisites

Before starting, ensure your development environment meets:

• Visual Studio 2022 (17.0 or later) or Visual Studio Code (latest)
• .NET 6.0 SDK or later (.NET 8.0 recommended)
• Syncfusion Blazor License (Trial or commercial license key)
• Basic Blazor knowledge (Components, data binding, Razor syntax)

Installation

Step 1: Install NuGet Package

Install the Syncfusion.Blazor.SmithChart package in your Blazor project.

Package Manager Console:

Install-Package Syncfusion.Blazor.SmithChart

\.NET CLI:

dotnet add package Syncfusion.Blazor.SmithChart

Visual Studio NuGet Manager: 1. Right-click project → Manage NuGet Packages 2. Search for Syncfusion.Blazor.SmithChart 3. Click Install

Step 2: Register Syncfusion Services

Blazor Server (.NET 6/7/8)

Open Program.cs and add Syncfusion services:

using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

// Configure the HTTP request pipeline
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

Register License Key:

Add your license key before AddSyncfusionBlazor():

// Register Syncfusion license
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

builder.Services.AddSyncfusionBlazor();

Blazor WebAssembly (.NET 6/7/8)

Open Program.cs:

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;
using YourAppNamespace;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient 
{ 
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
});

// Register Syncfusion license
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

Blazor Web App (.NET 8+)

Open Program.cs:

using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

// Register Syncfusion license
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

// Configure the HTTP request pipeline
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode();

app.Run();

Step 3: Add Theme References

Add Syncfusion theme CSS to your application.

Blazor Server

Open Pages/_Host.cshtml (or _Layout.cshtml) and add in <head>:

<head>
    <!-- Other head content -->
    
    <!-- Syncfusion Blazor Theme -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

Blazor WebAssembly

Open wwwroot/index.html and add in <head>:

<head>
    <!-- Other head content -->
    
    <!-- Syncfusion Blazor Theme -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

Blazor Web App (.NET 8)

Open Components/App.razor and add in <head>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    
    <!-- Syncfusion Blazor Theme -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    
    <link rel="stylesheet" href="app.css" />
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

Available Themes:

• bootstrap5.css - Bootstrap 5 theme (recommended)
• material.css - Material Design theme
• fabric.css - Microsoft Fabric theme
• tailwind.css - Tailwind CSS theme
• fluent.css - Microsoft Fluent theme
• highcontrast.css - High contrast theme

Step 4: Add Script Reference (Optional)

For advanced features like export, add the Syncfusion script (not required for basic charts):

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Your First Smith Chart

Create a new Razor page SmithChartDemo.razor:

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

<h3>Transmission Line Impedance Analysis</h3>

<SfSmithChart Height="600px" Width="100%">
    <SmithChartTitle Text="Impedance Matching Example"></SmithChartTitle>
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Transmission Line" 
                          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 = 8, Reactance = 10 },
        new SmithChartData { Resistance = 6, Reactance = 4.5 },
        new SmithChartData { Resistance = 4.5, Reactance = 2 },
        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.5, Reactance = 0.4 },
        new SmithChartData { Resistance = 0, Reactance = 0.2 }
    };
}

Multiple Series Example

Display multiple transmission lines for comparison:

@page "/multiple-series"
@using Syncfusion.Blazor.Charts

<h3>Antenna Tuning Comparison</h3>

<SfSmithChart Height="600px" Width="100%">
    <SmithChartTitle Text="Before and After 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>
        </SmithChartSeries>
        <SmithChartSeries Name="After Matching" 
                          DataSource="@AfterData" 
                          Reactance="Reactance" 
                          Resistance="Resistance"
                          Fill="#4ECDC4">
            <SmithChartSeriesMarker Visible="true" Shape="@Syncfusion.Blazor.Charts.Shape.Diamond"></SmithChartSeriesMarker>
        </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 = 5, Reactance = 2 },
        new SmithChartData { Resistance = 3, Reactance = 1.2 },
        new SmithChartData { Resistance = 2, Reactance = 0.8 },
        new SmithChartData { Resistance = 1.5, Reactance = 0.5 },
        new SmithChartData { Resistance = 1, Reactance = 0.2 },
        new SmithChartData { Resistance = 0.5, Reactance = 0.1 }
    };
}

Troubleshooting

Smith Chart Not Rendering

Problem: Component doesn't display or shows blank space.

Solutions: 1. Verify NuGet package is installed: Syncfusion.Blazor.SmithChart 2. Check theme CSS is referenced in HTML head 3. Ensure AddSyncfusionBlazor() is called in Program.cs 4. Verify license key is registered (check console for license warnings) 5. Confirm DataSource has valid data with Resistance and Reactance properties

License Key Warnings

Problem: Console shows "License key not registered" warnings.

Solutions: 1. Register license key before AddSyncfusionBlazor():

   Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("KEY");

2. Get license from Syncfusion Portal 3. For trials, register for a 30-day trial license

Data Not Displaying

Problem: Smith Chart renders but series line is missing.

Solutions: 1. Verify DataSource is not null or empty 2. Check property names match: Resistance="Resistance" and Reactance="Reactance" 3. Ensure data properties use double? (nullable) not double 4. Verify data values are within reasonable ranges (0-∞ for normalized impedance) 5. Check browser console for JavaScript errors

Theme Not Applied

Problem: Smith Chart appears unstyled or has incorrect colors.

Solutions: 1. Verify theme CSS link is in the correct location (<head> section) 2. Check path: _content/Syncfusion.Blazor.Themes/bootstrap5.css 3. Clear browser cache and rebuild project 4. Try a different theme to isolate the issue 5. Ensure static files middleware is configured: app.UseStaticFiles()