syncfusion-angular-smith-chart

# 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: { 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: ```typescript 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: ```typescript @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: ```typescript 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: ```typescript // ✗ 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** ```typescript 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 |