syncfusion-blazor-smith-charts

What this skill does

# 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](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](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](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](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](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](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](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](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](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:

```razor
@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, Reac