syncfusion-javascript-smith-chart

# Implementing Syncfusion SmithChart in TypeScript and JavaScript The Syncfusion EJ2 SmithChart is a specialized visualization component for plotting normalized complex impedance or admittance data in high-frequency circuit, transmission-line, antenna, matching-network, and network-analysis applications. This skill covers only: - EJ2 TypeScript using `@syncfusion/ej2-charts` - EJ2 JavaScript using `ej.charts.Smithchart` - npm and bundler-based TypeScript applications - Global CDN-based JavaScript applications Do not generate Vue, React, Angular, Composition API, directive, provider, or Single File Component examples when this skill is used. ## Platform Support ### TypeScript Use TypeScript when the project requires: - Static type checking - IDE IntelliSense - ES module imports - npm package management - Webpack or another bundler - Typed event arguments - Explicit optional-feature module injection Import SmithChart from: ```typescript import { Smithchart } from '@syncfusion/ej2-charts'; ``` Create and render the component: ```typescript const smithchart: Smithchart = new Smithchart(configuration); smithchart.appendTo( '#smithchart-container' ); ``` The basic SmithChart does not require module injection. Optional features require injection: ```typescript import { Smithchart, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-charts'; Smithchart.Inject( SmithchartLegend, TooltipRender ); ``` ### JavaScript Use JavaScript when the project requires: - Direct browser execution - CDN-based dependency loading - No compilation - No module bundler - Global EJ2 namespace access Create SmithChart through: ```javascript var smithchart = new ej.charts.Smithchart( configuration ); smithchart.appendTo( '#smithchart-container' ); ``` When the complete EJ2 global bundle is loaded, TypeScript-style imports and explicit feature injection are not required. ## When to Use This Skill Use this skill when the user needs to: - Create an EJ2 SmithChart. - Plot normalized complex impedance. - Plot normalized complex admittance. - Visualize transmission-line parameters. - Display RF network measurements. - Display antenna or matching-network measurements. - Compare measured and simulated data. - Configure horizontal and radial axes. - Customize major and minor gridlines. - Configure axis labels and intersection behavior. - Plot multiple series. - Bind inline points. - Map custom datasource fields. - Add markers and data labels. - Enable point tooltips. - Display and customize a legend. - Toggle series through legend items. - Apply built-in themes. - Configure responsive rendering. - Enable right-to-left rendering. - Print or export SmithChart. - Update SmithChart data dynamically. - Convert absolute impedance to normalized impedance. - Convert normalized impedance to admittance. - Convert reflection-coefficient values to normalized impedance. - Diagnose rendering, data-binding, tooltip, legend, or sizing issues. ## Validation Workflow Before generating SmithChart code, complete each validation step. ### Step 1: Identify the Implementation Determine whether the requested solution is: - TypeScript - JavaScript - Both TypeScript and JavaScript Do not substitute a framework wrapper. ### Step 2: Identify the Rendering Mode SmithChart supports two root-level rendering modes: ```text Impedance Admittance ``` Impedance: ```typescript renderType: 'Impedance' ``` Admittance: ```typescript renderType: 'Admittance' ``` Do not place the rendering mode inside an individual series. Incorrect: ```typescript series: [ { type: 'Impedance' } ] ``` Correct: ```typescript const smithchart: Smithchart = new Smithchart({ renderType: 'Impedance', series: [ { points: data } ] }); ``` ### Step 3: Validate the Electrical Data Determine whether the input contains: - Normalized impedance - Absolute impedance in ohms - Normalized admittance - Reflection coefficient - S-parameter real and imaginary values - Already transformed SmithChart coordinates Do not map raw S11 real and imaginary values directly as normalized impedance unless the data has already been converted. ### Step 4: Validate Point Fields Inline SmithChart points require: ```typescript { resistance: number, reactance: number } ``` Both values must be finite numbers. ```typescript const isValidPoint = ( point: SmithChartPoint ): boolean => { return ( Number.isFinite( point.resistance ) && Number.isFinite( point.reactance ) ); }; ``` ### Step 5: Identify Optional Features Validate every optional feature before generating imports. | Feature | Required TypeScript Module | |---|---| | Basic SmithChart | No optional module | | Marker | No optional module | | Data label | No optional module | | Tooltip | `TooltipRender` | | Legend | `SmithchartLegend` | | Axis customization | No optional module | | Print | No optional module | | Export | No optional module | ### Step 6: Validate Imports Before Code Generation For tooltip and legend: ```typescript import { Smithchart, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-charts'; ``` ### Step 7: Validate Injection Before Code Generation ```typescript Smithchart.Inject( SmithchartLegend, TooltipRender ); ``` Do not generate the component configuration first and verify modules afterward. ### Step 8: Validate Configuration Hierarchy Use: ```typescript marker ``` not: ```typescript markerSettings ``` Use: ```typescript marker: { dataLabel: { visible: true } } ``` not: ```typescript dataLabelSettings: { visible: true } ``` Use the tooltip at series level: ```typescript series: [ { tooltip: { visible: true } } ] ``` Do not use a Chart-style root tooltip: ```typescript tooltip: { enable: true } ``` ### Step 9: Validate the Container Confirm that: - The host element exists. - The selector matches `appendTo(...)`. - The parent has an available width. - SmithChart has a suitable height. - The EJ2 theme stylesheet is loaded. - A hidden parent is refreshed after becoming visible. ## Documentation and Navigation Guide ### Getting Started and Setup Read: ```text references/getting-started.md ``` Use it for: - Installation - npm package setup - TypeScript setup - JavaScript setup - CDN setup - Container configuration - Initial component creation - Theme loading - License registration - Basic troubleshooting ### Series and Data Read: ```text references/series-and-data.md ``` Use it for: - Impedance rendering - Admittance rendering - Inline points - Datasource mapping - Multiple series - Series styling - Dynamic updates - Normalization - Reflection-coefficient conversion - Remote data - Real-time data ### Axis Configuration Read: ```text references/axis-configuration.md ``` Use it for: - Horizontal axis - Radial axis - Axis-label positioning - Label-overlap handling - Major gridlines - Minor gridlines - Axis lines - Axis-label rendering - Responsive axis styling ### Markers and Labels Read: ```text references/markers-and-labels.md ``` Use it for: - Marker visibility - Marker dimensions - Marker shape - Marker fill and border - Marker opacity - Data-label visibility - Data-label text style - Data-label fill and border - Connector lines - Data-label templates ### Customization and Legends Read: ```text references/customization-and-legends.md ``` Use it for: - Legend module injection - Legend visibility - Legend positioning - Legend styling - Series visibility toggling - Tooltip module injection - Tooltip styling - Theme configuration - Print - Export - RTL - Responsive behavior ## Installation Install the EJ2 Charts package: ```bash npm install @syncfusion/ej2-charts ``` Do not require separate installation of every transitive dependency unless the package manager reports a specific unresolved dependency. ## Theme Setup Don't Load an EJ2 theme stylesheet: Keep the configured theme aligned: ```typescript theme: 'Material' ``` ## Container Setup Create the host element before initializing SmithChart. ```html <div class="smithchart-wrapper"> <div id="smithchart-container"></div> </div> ``` ```css .smithchart-wrapper { width: 100%; max-width: 1000px; margin: 0 auto; } #smithchart-container { width: 100%; min-height: 550px; } ``` The component can also define dimensions: ```typescript width: '100%', height: '550px' ``` ## Quick Start Example ### TypeScript #### index.html ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>EJ2 SmithChart</title> <style> #smithchart-container { width: 100%; min-height: 500px; } </style> </head> <body> <div id="smithchart-container"></div> <script scr="index.js"></script> </body> </html> ``` #### index.ts ```typescript import { Smithchart } from '@syncfusion/ej2-charts'; interface SmithChartPoint { resistance: number; reactance: number; } const data: SmithChartPoint[] = [ { resistance: 2.5, reactance: 1.3 }, { resistance: 2, reactance: 1 }, { resistance: 1.5, reactance: 0.5 }, { resistance: 1, reactance: 0 }, { resistance: 0.8, reactance: -0.2 } ]; const smithchart: Smithchart = new Smithchart({ width: '100%', height: '500px', renderType: 'Impedance', series: [ { points: data, fill: '#2563EB', width: 2, marker: { visible: true } } ] }); smithchart.appendTo( '#smithchart-container' ); ``` ### JavaScript ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>EJ2 JavaScript SmithChart</title> <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js"></script> <style> #smithchart-container { width: 100%; min-height: 500px; } </style> </head> <body> <div id="smithchart-container"></div> <script> var data = [ { resistance: 2.5, reactance: 1.3 }, { resistance: 2, reactance: 1 }, { resistance: 1.5, reactance: 0.5 }, { resistance: 1, reactance: 0 }, { resistance: 0.8, reactance: -0.2 } ]; var smithchart = new ej.charts.Smithchart({ width: '100%', height: '500px', renderType: 'Impedance', series: [ { points: data, fill: '#2563EB', width: 2, marker: { visible: true } } ] }); smithchart.appendTo( '#smithchart-container' ); </script> </body> </html> ``` ## SmithChart Rendering Modes ### Impedance Use: ```typescript renderType: 'Impedance' ``` A normalized impedance point represents: ```text z = r + jx ``` where: - `r` is normalized resistance. - `x` is normalized reactance. - Positive reactance is inductive. - Negative reactance is capacitive. The normalized matched-load point is: ```typescript { resistance: 1, reactance: 0 } ``` It is not: ```typescript { resistance: 0, reactance: 0 } ``` ### Admittance Use: ```typescript renderType: 'Admittance' ``` A normalized admittance point represents: ```text y = g + jb ``` The SmithChart point fields remain: ```typescript { resistance: number, reactance: number } ``` In admittance mode, these mapped fields represent the real and imaginary admittance coordinates used for rendering. ### Separate Impedance and Admittance Views A single SmithChart has one rendering mode. Do not mix rendering modes per series. Use separate components: ```typescript const impedanceChart: Smithchart = new Smithchart({