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:
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:
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:
@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:
@Component({
template: `
<ejs-smithchart
renderType: 'Admittance'
[series]="series"
[horizontalAxis]="hAxis"
[radialAxis]="rAxis">
</ejs-smithchart>
`
})
export class AppComponent {
series = [
{
points: [...],
}
];
hAxis = {
labelPosition: 'Outside',
majorGridLines: { visible: true, width: 1, opacity: 0.8 },
minorGridLines: { visible: true, count: 4, opacity: 0.4 }
};
rAxis = {
majorGridLines: { visible: true, width: 1, opacity: 0.8 },
minorGridLines: { visible: true, count: 4, opacity: 0.4 }
};
}
Pattern 4: Data-Driven Series from External Source
Bind series data from an array using dataSource property:
series = [
{
name: 'Test Results',
dataSource: [
{ impedance: 50, phase: 0 }, // Will be mapped to resistance/reactance
{ impedance: 75, phase: 15 },
{ impedance: 100, phase: 30 }
],
resistance: 'impedance',
reactance: 'phase'
}
];
Pattern 5: Export and Print Integration
Enable export and print functionality for documentation:
@Component({
template: `
<div>
<button (click)="exportChart('PNG')">Export PNG</button>
<button (click)="exportChart('SVG')">Export SVG</button>
<button (click)="printChart()">Print</button>
</div>
<ejs-smithchart #smithchart [series]="series"></ejs-smithchart>
`
})
export class AppComponent {
@ViewChild('smithchart') smithchart!: any;
exportChart(format: string) {
this.smithchart.export(format, 'smith-chart-export');
}
printChart() {
this.smithchart.print();
}
}
## Import Best Practices
### ✅ Minimal Imports (Most Cases)
For basic smith charts without advanced features, import only what you need:
import { SmithchartModule } from '@syncfusion/ej2-angular-charts' import { Component, ViewEncapsulation } from '@angular/core'
@Component({ imports: [SmithchartModule], // ✓ Only SmithchartModule needed standalone: true, encapsulation: ViewEncapsulation.None, template: <ejs-smithchart [series]="series"></ejs-smithchart> }) export class AppComponent { series = [{ points: [...] }] }
### ❌ Don't Import Unnecessary Modules
Avoid importing modules/services you're not using:
// ✗ WRONG - CommonModule not needed in standalone component import { CommonModule } from '@angular/common' @Component({ imports: [SmithchartModule, CommonModule], // CommonModule is unnecessary standalone: true })
// ✗ WRONG - SmithchartLegendService not needed without custom legend events import { SmithchartLegendService } from '@syncfusion/ej2-angular-charts' @Component({ providers: [SmithchartLegendService], // Only for custom legend click handling standalone: true }) export class AppComponent { legendSettings = { visible: true } // Basic legend doesn't need the service }
// ✗ WRONG - TooltipRenderService not needed without tooltips import { TooltipRenderService } from '@syncfusion/ej2-angular-charts' @Component({ providers: [TooltipRenderService], // Only needed if tooltip: { visible: true } standalone: true }) export class AppComponent { series = [{ points: [...] }] // No tooltip configuration }
### ✅ Add Services Only When Needed
| Use Case | Service | Import |
|----------|---------|--------|
| Basic chart | None | Only `SmithchartModule` |
| With tooltips | `TooltipRenderService` | Add when using `tooltip: { visible: true }` |
| Advanced legend clicks | `SmithchartLegendService` | Add when handling legend interaction events |
**Example: Tooltips Only When Used**
import { SmithchartModule, TooltipRenderService } from '@syncfusion/ej2-angular-charts'
@Component({ imports: [SmithchartModule], providers: [TooltipRenderService], // ✓ Add only if using tooltips standalone: true }) export class AppComponent { series = [{ points: [ { resistance: 0.2, reactance: 0.1 }, { resistance: 0.4, reactance: 0.3 } ], tooltip: { visible: true } // ✓ Tooltips are configured }] }
## Key Configuration Properties
| Property | Type | Default | Purpose |
|----------|------|---------|---------|
| `series` | Array | `[]` | Array of series with points data for visualization |
| `points` | Array | - | Data array for a series (resistance, reactance pairs) |
| `dataSource` | Array | - | Bind data from external source or data array |
| `resistance` | string | - | Property name for X-axis value (resistance) from dataSource |
| `reactance` | string | - | Property name for Y-axis value (reactance) from dataSource |
| `name` | string | - | Series name for legend display |
| `renderType` | string | `'Impedance'` | Render type: `'Impedance'` or `'Admittance'` |
| `fill` | string | - | Series line color (hex or named color) |
| `width` | number | 2 | Series line width in pixels |
| `opacity` | number | 1 | Series line opacity (0-1) |
| `marker` | object | - | Marker configuration (visible, shape, size) |
| `dataLabel` | object | - | Data label configuration (visible, format) |
| `tooltip` | object | - | Tooltip configuration (visible, format, template) |
| `title` | object | - | Title configuration (text, visible, styling) |
| `height` | string/number | '400px' | Chart height (px or percentage) |
| `width` | string/number | '100%' | Chart width (px or percentage) |
| `theme` | string | `'Material'` | Built-in theme (Material, Bootstrap, Tailwind, etc.) |
| `legendSettings` | object | - | Legend configuration (visible, position, alignment) |
| `horizontalAxis` | object | - | Horizontal axis customization and labels |
| `radialAxis` | object | - | Radial axis customization and gridlines |
| `enableRtl` | boolean | `false` | Enable right-to-left text direction support |
| `ariaLabel` | string | - | Accessibility label for screen readers |
## Common Use Cases
1. **Circuit Analysis & Impedance Matching** - Visualize impedance matching and transmission line characteristics for high-frequency circuits
2. **Network & Filter Tuning** - Display multiple filter responses and network parameters for comparison and optimization
3. **Antenna Design & Optimization** - Plot impedance curves for antenna tuning, SWR analysis, and frequency response visualization
4. **RF Engineering** - Analyze reflection coefficients, standing wave patterns, and transmission line properties
5. **Microwave Engineering** - Design and analyze transmission lines, waveguides, and microwave components
6. **Educational Content** - Teach high-frequency circuit concepts with interactive charts and real-time parameter visualization
7. **Performance Dashboards** - Monitor multiple transmission line metrics and network parameters in real-time
8. **Device Testing & Validation** - Compare measured vs. simulated impedance data for device characterization
9. **Quality Control** - Visualize production test results for electronic components on smith charts
10. **Signal Integrity Analysis** - Analyze termination impedance and signal reflection for PCB design verification
---
## API Reference
A complete API reference for the Syncfusion Angular `Smithchart` is available in the `references` folder. It includes property anchors, method links, and event argument types that map to the official docs.
Read the API reference: [references/api-reference.md](references/api-reference.md)
**Next Steps:** Start with [getting-started.md](references/getting-started.md) to install and render your first smith chart, then explore other reference guides based on your needs.
