syncfusion-angular-smith-chart

What this skill does

# Implementing Syncfusion Angular Smith Chart Component

## When to Use This Skill

Use this skill when you need to:
- **Visualize transmission lines** - Plot impedance or admittance parameters on smith charts for circuit analysis
- **Create smith charts** - Render smith chart components with proper configuration and data binding
- **Add multiple series** - Display multiple transmission line series on a single chart
- **Customize axes** - Configure horizontal and radial axes with custom labels, gridlines, and styling
- **Highlight data points** - Add markers and data labels to emphasize key values
- **Display legends** - Implement legends with positioning, alignment, and visibility toggling
- **Enable interactivity** - Add tooltips, print functionality, and event handling
- **Style and theme** - Apply Syncfusion themes, custom colors, and responsive sizing
- **Ensure accessibility** - Support WCAG compliance, keyboard navigation, and RTL layouts

## Component Overview

The **Syncfusion Angular Smith Chart** is a specialized data visualization component for high-frequency circuit applications. It uses two sets of concentric circles (constant resistance and reactance) to plot transmission line parameters for impedance and admittance analysis.

**Key Characteristics:**
- **Dual-axis system** - Horizontal axis (straight line for resistance) and radial axis (circular path for reactance)
- **Render Types** - Support for both `Impedance` (default) and `Admittance` parameters
- **Multi-series support** - Display multiple transmission line series simultaneously with different colors and styles
- **Data binding** - Two methods: `points` array or `dataSource` with `resistance`/`reactance` property mapping
- **Interactive elements** - Markers, data labels, tooltips, legends with visibility toggle, and export functionality
- **Customizable styling** - Axis labels, major/minor gridlines, colors, themes (Material, Bootstrap, Tailwind), responsive sizing
- **Accessibility features** - WCAG compliance, keyboard navigation, RTL (right-to-left) support, screen reader compatibility
- **Event-driven** - Load events, series rendering, legend interactions, and tooltip customization
- **Export capabilities** - PNG, JPEG, SVG formats for reporting and documentation

## Documentation and Navigation Guide

This skill guides you through implementing smith charts. Here are the key topics:

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation and package setup for Angular 19+
- Basic smith chart component implementation
- Module injection requirements
- Data binding with resistance and rectangle values
- CSS imports and theming
- When to read: Before implementing your first smith chart

### Series and Data Management
📄 **Read:** [references/series-and-data.md](references/series-and-data.md)
- Understanding series concepts and data structure
- Points vs dataSource for data input
- Impedance and Admittance render types
- Series customization (fill, opacity, width, visibility)
- Multiple series examples and patterns
- Smart labels and overlapping prevention
- When to read: Bind data and configure multiple series

### Axis Customization
📄 **Read:** [references/axis-customization.md](references/axis-customization.md)
- Horizontal and radial axis configuration
- Axis labels (positioning, intersection handling, styling)
- Major and minor gridlines (visibility, width, dash patterns, opacity)
- Axis line customization
- Label and value formatting
- When to read: Customize axis appearance and behavior

### Markers and Data Labels
📄 **Read:** [references/markers-and-labels.md](references/markers-and-labels.md)
- Marker configuration and visibility
- Data label display and formatting
- Positioning markers and labels without overlap
- Custom label content (resistance, reactance values)
- Formatting numeric values
- When to read: Highlight specific data points or show detailed values

### Legend and Interaction
📄 **Read:** [references/legend-and-interaction.md](references/legend-and-interaction.md)
- Legend visibility and positioning (top, bottom, left, right, custom)
- Legend alignment and placement
- Legend shape customization (circle, rectangle, triangle)
- Legend sizing and responsiveness
- Series visibility toggle with legend clicks
- When to read: Add and configure legends for series identification

### Advanced Features
📄 **Read:** [references/advanced-features.md](references/advanced-features.md)
- Tooltip configuration and formatting
- Print and export functionality
- RTL (Right-to-Left) support
- Theming and CSS customization
- Container sizing and responsive behavior
- WCAG accessibility compliance
- Keyboard navigation
- Event handling (click, hover, legend toggle)
- When to read: Implement complex features like tooltips, export, events, or accessibility

### Troubleshooting
📄 **Read:** [references/troubleshooting.md](references/troubleshooting.md)
- Common implementation issues and solutions
- Data format validation and errors
- Module import troubleshooting
- Performance optimization tips
- Chart rendering and display issues
- When to read: Debug issues or optimize chart performance

## Quick Start Example

Here's a minimal example to render a basic smith chart:

```typescript
import { SmithchartModule } from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';

@Component({
  imports: [SmithchartModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-smithchart 
    id='smithchart-container'
    [series]="series">
  </ejs-smithchart>`
})
export class AppComponent {
  series = [{
    points: [
      { resistance: 10, reactance: 10 },
      { resistance: 20, reactance: 15 },
      { resistance: 30, reactance: 5 },
      { resistance: 40, reactance: -5 },
      { resistance: 50, reactance: -15 }
    ]
  }]
}
```

**Output:** A basic smith chart with one series showing transmission line impedance values.

## Common Patterns

### Pattern 1: Multi-Series Transmission Line Comparison

Display multiple transmission line series with different colors for impedance comparison:

```typescript
series = [
  {
    name: 'Transmission Line A',
    points: [
      { resistance: 0.2, reactance: 0.1 },
      { resistance: 0.5, reactance: 0.3 },
      { resistance: 1.0, reactance: 0.5 }
    ],
    fill: '#0066CC',
    marker: { visible: true },
    tooltip: { visible: true }
  },
  {
    name: 'Transmission Line B',
    points: [
      { resistance: 0.3, reactance: 0.15 },
      { resistance: 0.6, reactance: 0.4 },
      { resistance: 1.2, reactance: 0.6 }
    ],
    fill: '#FF6633',
    marker: { visible: true },
    tooltip: { visible: true }
  }
]
```

### Pattern 2: Interactive Tooltips, Legends, and Markers

Enable legends for series identification, tooltips for detailed values, and markers to highlight data points:

```typescript
@Component({
  template: `
    <ejs-smithchart [series]="series" [legendSettings]="legendSettings">
    </ejs-smithchart>
  `
})
export class AppComponent {
  series = [
    {
      name: 'Device A',
      marker: { 
        visible: true, 
        shape: 'Circle', 
        width: 8,
        height: 8,
        dataLabel: { visible: true }  // ✓ dataLabel INSIDE marker
      },
      tooltip: { visible: true, template: 'R:${resistance}+jX:${reactance}' },
      points: [...]
    }
  ];

  legendSettings = { 
    visible: true, 
    position: 'Bottom',
    alignment: 'Center' 
  };
}
```

### Pattern 3: Admittance Render Type with Axis Customization

Switch to Admittance rendering and customize axes with gridlines:

```typescript
@Component({
  template: `
    <ejs-smithchart
      renderType: 'Admittance'
      [series]="series"
      [horizontalAxis]="hAxis"
      [radialAxis]="rAxis">
    </ejs-smithchart>
  `
})
export class AppComponent {
  series = [
    {
      points: [...],
    }
  ];

  hAxis = {
    labelPosition: 'Outside',
    majorGridLines: { vis