Syncfusion React Smithchart

Implementing Syncfusion React Smith Charts

A comprehensive skill for implementing and customizing Syncfusion React Smith Chart component. Smith Charts are specialized diagrams used in electrical engineering and RF design to visualize impedance, reflection coefficients, and transmission line parameters.

When to Use This Skill

Use this skill when you need to:

• Visualize transmission line impedance and reflection data
• Plot RF circuit parameters (S-parameters, impedance matching)
• Display resistance and reactance relationships
• Create interactive Smith Charts with markers and tooltips
• Implement electrical engineering data visualizations
• Configure Smith Chart axes (horizontal and radial)
• Add legends, data labels, and annotations
• Export Smith Charts for documentation or reports
• Ensure accessibility compliance for technical charts

Component Overview

The Syncfusion React Smith Chart is a specialized charting component that:

• Plots data points with resistance and reactance coordinates
• Supports multiple series with customizable styling
• Provides horizontal and radial axis configurations
• Includes interactive features (tooltips, legends, markers)
• Offers print and export capabilities (PNG, JPEG, SVG, PDF)
• Ensures WCAG 2.2 accessibility compliance
• Supports responsive sizing and theming

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Dependencies and package installation
• Installing @syncfusion/ej2-react-charts via npm
• Basic SmithchartComponent implementation
• Module injection (SmithchartLegend, TooltipRender)
• CSS theme imports and configuration
• First render and initialization
• Complete working example

Data and Series Configuration

📄 Read: references/series-configuration.md

• Adding multiple series to Smith Chart
• Two data binding methods (dataSource vs points)
• Resistance and reactance field mapping
• Series customization (fill, opacity, width, visibility)
• Smart label configuration
• Multi-series examples and patterns

Axis Configuration

📄 Read: references/axis-configuration.md

• Horizontal axis (straight line) configuration
• Radial axis (circular path) configuration
• Label customization (position, intersection handling, styling)
• Major and minor gridlines configuration
• Axis line properties (width, dash patterns, visibility)
• Complete axis customization examples

Visual Elements: Markers and Data Labels

📄 Read: references/markers-and-labels.md

• Enabling and customizing markers on data points
• Marker properties (size, shape, color, border, opacity)
• Data label implementation and smart positioning
• Data label styling (font, color, border)
• Best practices for visual clarity

Legend Configuration

📄 Read: references/legend-configuration.md

• Enabling legends with SmithchartLegend module
• Positioning (top, bottom, left, right, custom)
• Alignment options (near, center, far)
• Legend customization (shape, size, padding)
• Toggle visibility functionality
• Series naming for legend display

Tooltips and Interactivity

📄 Read: references/tooltip-configuration.md

API Reference

📄 Read: references/api-reference.md

• Enabling tooltips with TooltipRender module
• Per-series tooltip configuration
• Tooltip visibility and appearance
• When to use tooltips vs data labels
• Interactive hover behavior

Appearance and Sizing

📄 Read: references/dimensions-and-sizing.md

• Container-based sizing (CSS/inline styles)
• Fixed pixel dimensions
• Percentage-based responsive sizing
• Responsive design considerations
• When to use each sizing approach

Title and Subtitle

📄 Read: references/title-and-subtitle.md

• Adding descriptive titles to charts
• Subtitle configuration
• Title trimming for long text
• Font and alignment customization
• Visibility controls

Print, Export, and Accessibility

📄 Read: references/print-export-accessibility.md

• Printing Smith Charts directly from browser
• Exporting to multiple formats (PNG, JPEG, SVG, PDF)
• WCAG 2.2 and Section 508 compliance
• Keyboard navigation support
• Screen reader compatibility
• WAI-ARIA attributes
• Accessibility testing and best practices

Quick Start Example

import * as React from 'react';
import { SmithchartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';

function App() {
  const transmissionData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0, reactance: 0.1 },
    { resistance: 0, reactance: 0.2 },
    { resistance: 0.3, reactance: 0.3 },
    { resistance: 0.5, reactance: 0.4 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Transmission Line Impedance' }}
      legendSettings={{ visible: true }}
    >
      <Inject services={[SmithchartLegend, TooltipRender]} />
      <SmithChartSeriesCollectionDirective>
        <SmithChartSeriesDirective
          name="Transmission1"
          points={transmissionData}
          marker={{ visible: true }}
          tooltip={{ visible: true }}
        />
      </SeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Common Patterns

Multiple Series with DataSource

const series1Data = [
  { resistance: 0, reactance: 0.05 },
  { resistance: 0.3, reactance: 0.2 },
  { resistance: 1.0, reactance: 0.4 }
];

const series2Data = [
  { resistance: 0.1, reactance: 0.1 },
  { resistance: 0.5, reactance: 0.3 },
  { resistance: 1.5, reactance: 0.5 }
];

<SmithchartComponent legendSettings={{ visible: true }}>
  <Inject services={[SmithchartLegend]} />
  <SmithChartSeriesCollectionDirective>
    <SmithChartSeriesDirective
      name="Line 1"
      dataSource={series1Data}
      resistance="resistance"
      reactance="reactance"
      fill="blue"
    />
    <SmithChartSeriesDirective
      name="Line 2"
      dataSource={series2Data}
      resistance="resistance"
      reactance="reactance"
      fill="red"
    />
  </SeriesCollectionDirective>
</SmithchartComponent>

Customized Markers and Labels

<SmithChartSeriesDirective
  name="Impedance Data"
  points={data}
  marker={{
    visible: true,
    height: 10,
    width: 10,
    shape: 'Diamond',
    fill: 'green',
    dataLabel: {
      visible: true,
      textStyle: { color: 'black', size: '10px' }
    }
  }}
/>

Export to Image

import { useRef } from 'react';

function ChartWithExport() {
  const chartRef = useRef(null);

  const exportChart = () => {
    chartRef.current.export('PNG', 'smithchart');
  };

  return (
    <>
      <button onClick={exportChart}>Export as PNG</button>
      <SmithchartComponent ref={chartRef} id="smithchart">
        {/* series configuration */}
      </SmithchartComponent>
    </>
  );
}

Key Props and Features

SmithchartComponent Props

SeriesDirective Props

Required Module Injections

import { SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';

<Inject services={[SmithchartLegend, TooltipRender]} />

• SmithchartLegend: Required for legend functionality
• TooltipRender: Required for tooltip display

Troubleshooting Guide

Chart Not Rendering

• Verify @syncfusion/ej2-react-charts package is installed
• Ensure CSS theme is imported in your app
• Check that data has valid resistance and reactance fields
• Confirm container has defined dimensions

Legend Not Showing

• Verify legendSettings.visible is set to true
• Ensure SmithchartLegend module is injected
• Check that series have name property defined

Tooltips Not Working

• Confirm TooltipRender module is injected
• Verify tooltip.visible is true on series
• Check that mouse hover events are enabled

Data Not Displaying

• Validate data format: array of objects with resistance/reactance
• Check field names match dataSource property configuration
• Ensure numeric values are valid (not NaN or undefined)
• Verify series visibility is not set to false

Export Fails

• Confirm chart has a valid id property
• Check export format is supported (PNG, JPEG, SVG, PDF)
• Ensure export method is called on mounted component reference

Styling Issues

• Import correct Syncfusion theme CSS file
• Check that custom styles don't conflict with component classes
• Verify width/height properties are properly formatted
• Ensure container styling allows chart to render

Additional Resources

All detailed documentation is available in the reference files above. Each reference file is self-contained with complete examples, configuration options, and best practices specific to that feature area.

Smith Chart API Reference (expanded)

This document expands the quick cheat-sheet into a property-by-property reference for the commonly used public API of the React SmithchartComponent, SeriesDirective, and related option objects used in the reference examples. Where available, a typical default value is provided; if a default is implementation-dependent or not documented clearly in the examples, the Default column shows —.

SmithchartComponent — Core Props

Methods

• export(type: string, fileName: string) — Export the chart to 'PNG' | 'JPEG' | 'SVG' | 'PDF' using fileName (without extension).
• print(id?: string) — Print the chart. Optionally pass the chart container id.

Notes

• Some features require explicit injection of modules via <Inject services={[...]} />, for example SmithchartLegend and TooltipRender.

SeriesDirective / SeriesCollectionDirective — Series Props

Marker and DataLabel options

Legend settings

Tooltip settings and notes

• Inject TooltipRender to enable tooltip rendering. Common per-series tooltip option is:

Tooltips typically display series name, resistance, and reactance values.

Axis configuration (horizontalAxis / radialAxis)

Methods (component-level links)

• See the full component method list on the official API page: SmithchartComponent API.
• export(type, fileName, orientation?) — Export the chart. Docs: export method.
• print(id?) — Print the chart. Docs: print / beforePrint event docs.

Events

The Smithchart component exposes several lifecycle and render events. Links point to the event argument types in the official API.

• animationComplete — ISmithchartAnimationCompleteEventArgs
• axisLabelRender — ISmithchartAxisLabelRenderEventArgs
• beforePrint — ISmithchartPrintEventArgs
• legendRender — ISmithchartLegendRenderEventArgs
• load — ISmithchartLoadEventArgs
• loaded — ISmithchartLoadedEventArgs
• seriesRender — ISmithchartSeriesRenderEventArgs
• subtitleRender — ISubTitleRenderEventArgs
• textRender — ISmithchartTextRenderEventArgs
• titleRender — ITitleRenderEventArgs
• tooltipRender — ISmithChartTooltipEventArgs

Print / Export examples (usage)

// Exporting
chartRef.current.export('PNG', 'impedance-analysis');

// Printing
chartRef.current.print('smithchart');

Typical imports

import {
  SmithchartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  SmithchartLegend,
  TooltipRender
} from '@syncfusion/ej2-react-charts';

---

If you'd like, I can now cross-check each property against the official API page and replace any — defaults with the exact documented defaults. Should I perform that authoritative validation and update the table?

Axis Configuration

Table of contents

• Overview
• Axis Types
• Horizontal Axis
• Radial Axis
• Label Customization
• Label Position
• Label Intersection Action
• Label Style
• Gridlines Configuration
• Major Gridlines
• Minor Gridlines
• Gridline Dash Patterns
• Axis Line Customization
• Axis Line Properties
• Hiding Axis Lines
• Complete Examples
• Fully Customized Axes
• Minimal Gridlines Configuration
• High-Contrast Configuration
• Subtle Grid for Focus on Data
• Best Practices
• Label Configuration
• Gridlines
• Axis Lines
• Visual Hierarchy
• Common Use Cases
• Technical Documentation
• Interactive Dashboards
• Printed Reports

Overview

Smith Charts support two types of axes for plotting impedance data:

1. Horizontal Axis: Drawn as a straight line in the horizontal direction 2. Radial Axis: Drawn as a circular path

Both axes can be extensively customized to improve readability and match your application's design requirements.

Axis Types

Horizontal Axis

The horizontal axis represents the real component of impedance and extends horizontally across the Smith Chart. It uses straight lines for major and minor gridlines.

import { SmithchartComponent } from '@syncfusion/ej2-react-charts';

<SmithchartComponent
  id="smithchart"
  horizontalAxis={{
    // Horizontal axis configuration
  }}
>
  {/* series configuration */}
</SmithchartComponent>

Radial Axis

The radial axis represents the imaginary component of impedance and is drawn as circular arcs around the Smith Chart.

<SmithchartComponent
  id="smithchart"
  radialAxis={{
    // Radial axis configuration
  }}
>
  {/* series configuration */}
</SmithchartComponent>

Label Customization

Axis labels denote the intervals and values along the axes, helping users identify data points accurately. Both horizontal and radial axes support comprehensive label customization.

Label Position

The labelPosition property determines whether labels appear inside or outside the axis line.

Available values:

• 'Inside' - Labels appear within the chart area
• 'Outside' - Labels appear outside the axis line (default)

import * as React from "react";
import { SmithchartComponent, SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      horizontalAxis={{
        labelPosition: 'Inside'
      }}
      radialAxis={{
        labelPosition: 'Outside'
      }}
    >
      <SmithChartSeriesCollectionDirective>
        <SmithChartSeriesDirective points={data} />
      </SeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Label Intersection Action

The labelIntersectAction property controls how labels behave when they overlap with other labels.

Available values:

• 'None' - No action taken (default)
• 'Hide' - Hides overlapping labels

<SmithchartComponent
  id="smithchart"
  horizontalAxis={{
    labelIntersectAction: 'Hide'
  }}
  radialAxis={{
    labelIntersectAction: 'Hide'
  }}
>
  {/* series configuration */}
</SmithchartComponent>

Label Style

Customize label font properties using the labelStyle object.

Available properties:

• size - Font size (e.g., '12px', '14px')
• fontFamily - Font family (e.g., 'Arial', 'Roboto')
• fontWeight - Font weight (e.g., 'Normal', 'Bold')
• opacity - Label opacity (0 to 1)
• color - Label text color

<SmithchartComponent
  id="smithchart"
  horizontalAxis={{
    labelStyle: {
      size: '14px',
      fontFamily: 'Arial',
      fontWeight: 'Bold',
      fontStyle: 'Italic',
      color: '#333333',
      opacity: 1
    }
  }}
  radialAxis={{
    labelStyle: {
      size: '12px',
      fontFamily: 'Roboto',
      fontWeight: 'Normal',
      fontStyle: 'Italic',
      color: '#666666',
      opacity: 0.9
    }
  }}
>
  {/* series configuration */}
</SmithchartComponent>

Gridlines Configuration

Gridlines extend from the axes across the plot area, making it easier to read data values. Both horizontal and radial axes support major and minor gridlines.

Major Gridlines

Major gridlines are drawn at positions where labels are rendered. They provide primary reference lines for reading values.

Available properties:

• width - Line width in pixels
• dashArray - Dash pattern (e.g., '5,5' for dashed line)
• visible - Show or hide gridlines (boolean)
• opacity - Gridline opacity (0 to 1)

import * as React from "react";
import { SmithchartComponent, SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      horizontalAxis={{
        majorGridLines: {
          visible: true,
          width: 1,
          dashArray: '0',
          opacity: 0.8
        }
      }}
      radialAxis={{
        majorGridLines: {
          visible: true,
          width: 1,
          dashArray: '0',
          opacity: 0.8
        }
      }}
    >
      <SmithChartSeriesCollectionDirective>
        <SmithChartSeriesDirective points={data} />
      </SeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Minor Gridlines

Minor gridlines are drawn between two major gridlines, providing additional reference points.

Available properties:

• width - Line width in pixels
• dashArray - Dash pattern
• visible - Show or hide gridlines (boolean)
• opacity - Gridline opacity (0 to 1)
• count - Number of minor gridlines between major gridlines

<SmithchartComponent
  id="smithchart"
  horizontalAxis={{
    minorGridLines: {
      visible: true,
      width: 0.5,
      dashArray: '3,3',
      opacity: 0.5,
      count: 2
    }
  }}
  radialAxis={{
    minorGridLines: {
      visible: true,
      width: 0.5,
      dashArray: '3,3',
      opacity: 0.5,
      count: 2
    }
  }}
>
  {/* series configuration */}
</SmithchartComponent>

Gridline Dash Patterns

The dashArray property uses a comma-separated string to define dash and gap lengths.

Common patterns:

• '0' or '' - Solid line
• '5,5' - 5px dash, 5px gap
• '10,5' - 10px dash, 5px gap
• '3,3,10,3' - Complex pattern with varying dash/gap lengths

<SmithchartComponent
  id="smithchart"
  horizontalAxis={{
    majorGridLines: {
      visible: true,
      dashArray: '5,5'  // Dashed line
    },
    minorGridLines: {
      visible: true,
      dashArray: '2,2'  // Short dashes
    }
  }}
>
  {/* series configuration */}
</SmithchartComponent>

Axis Line Customization

The axis line is the main line that defines the axis itself. You can customize its appearance or hide it entirely.

Axis Line Properties

Available properties:

• width - Line width in pixels
• dashArray - Dash pattern
• visible - Show or hide the axis line (boolean, default: true)

import * as React from "react";
import { SmithchartComponent, SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      horizontalAxis={{
        axisLine: {
          visible: true,
          width: 2,
          dashArray: '0'
        }
      }}
      radialAxis={{
        axisLine: {
          visible: true,
          width: 2,
          dashArray: '0'
        }
      }}
    >
    <SmithChartSeriesCollectionDirective>
      <SmithChartSeriesDirective
          points={data}
      />
    </SeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Hiding Axis Lines

You can hide axis lines while keeping gridlines and labels visible:

<SmithchartComponent
  id="smithchart"
  horizontalAxis={{
    axisLine: {
      visible: false
    },
    majorGridLines: {
      visible: true
    }
  }}
  radialAxis={{
    axisLine: {
      visible: false
    },
    majorGridLines: {
      visible: true
    }
  }}
>
  {/* series configuration */}
</SmithchartComponent>

Complete Examples

Fully Customized Axes

import * as React from "react";
import { SmithchartComponent, SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const transmissionData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.1, reactance: 0.1 },
    { resistance: 0.3, reactance: 0.2 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 0.8, reactance: 0.4 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Custom Axis Configuration' }}
      horizontalAxis={{
        labelPosition: 'Outside',
        labelIntersectAction: 'Hide',
        labelStyle: {
          size: '12px',
          fontFamily: 'Arial',
          fontWeight: 'Bold',
          color: '#2c3e50',
          opacity: 1
        },
        majorGridLines: {
          visible: true,
          width: 1.5,
          dashArray: '0',
          opacity: 0.7
        },
        minorGridLines: {
          visible: true,
          width: 0.75,
          dashArray: '5,5',
          opacity: 0.4,
          count: 3
        },
        axisLine: {
          visible: true,
          width: 2,
          dashArray: '0'
        }
      }}
      radialAxis={{
        labelPosition: 'Outside',
        labelIntersectAction: 'Hide',
        labelStyle: {
          size: '12px',
          fontFamily: 'Arial',
          fontWeight: 'Normal',
          color: '#34495e',
          opacity: 0.9
        },
        majorGridLines: {
          visible: true,
          width: 1.5,
          dashArray: '0',
          opacity: 0.7
        },
        minorGridLines: {
          visible: true,
          width: 0.75,
          dashArray: '5,5',
          opacity: 0.4,
          count: 3
        },
        axisLine: {
          visible: true,
          width: 2,
          dashArray: '0'
        }
      }}
    >
      <SmithChartSeriesCollectionDirective>
        <SmithChartSeriesDirective
          points={transmissionData}
          fill="#3498db"
          width={2}
        />
      </SeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Minimal Gridlines Configuration

For a cleaner look with fewer visual elements:

import * as React from "react";
import { SmithchartComponent, SeriesDirective, SeriesCollectionDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Minimal Gridlines' }}
      horizontalAxis={{
        majorGridLines: {
          visible: true,
          width: 1,
          opacity: 0.5
        },
        minorGridLines: {
          visible: false
        },
        axisLine: {
          visible: true,
          width: 2
        }
      }}
      radialAxis={{
        majorGridLines: {
          visible: true,
          width: 1,
          opacity: 0.5
        },
        minorGridLines: {
          visible: false
        },
        axisLine: {
          visible: true,
          width: 2
        }
      }}
    >
      <SmithChartSeriesCollectionDirective>
        <SmithChartSeriesDirective points={data} />
      </SeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

High-Contrast Configuration

For better visibility in presentations or printed materials:

<SmithchartComponent
  id="smithchart"
  title={{ text: 'High Contrast Axes' }}
  horizontalAxis={{
    labelStyle: {
      size: '14px',
      fontWeight: 'Bold',
      color: '#000000'
    },
    majorGridLines: {
      visible: true,
      width: 2,
      opacity: 1
    },
    minorGridLines: {
      visible: true,
      width: 1,
      opacity: 0.6,
      count: 1
    },
    axisLine: {
      visible: true,
      width: 3
    }
  }}
  radialAxis={{
    labelStyle: {
      size: '14px',
      fontWeight: 'Bold',
      color: '#000000'
    },
    majorGridLines: {
      visible: true,
      width: 2,
      opacity: 1
    },
    minorGridLines: {
      visible: true,
      width: 1,
      opacity: 0.6,
      count: 1
    },
    axisLine: {
      visible: true,
      width: 3
    }
  }}
>
  {/* series configuration */}
</SmithchartComponent>

Subtle Grid for Focus on Data

Emphasize data by making gridlines less prominent:

<SmithchartComponent
  id="smithchart"
  title={{ text: 'Data-Focused Layout' }}
  horizontalAxis={{
    labelStyle: {
      size: '11px',
      color: '#95a5a6',
      opacity: 0.8
    },
    majorGridLines: {
      visible: true,
      width: 0.5,
      dashArray: '3,3',
      opacity: 0.3
    },
    minorGridLines: {
      visible: false
    },
    axisLine: {
      visible: true,
      width: 1,
      dashArray: '0'
    }
  }}
  radialAxis={{
    labelStyle: {
      size: '11px',
      color: '#95a5a6',
      opacity: 0.8
    },
    majorGridLines: {
      visible: true,
      width: 0.5,
      dashArray: '3,3',
      opacity: 0.3
    },
    minorGridLines: {
      visible: false
    },
    axisLine: {
      visible: true,
      width: 1,
      dashArray: '0'
    }
  }}
>
  {/* series configuration */}
</SmithchartComponent>

Best Practices

Label Configuration

• Use labelIntersectAction: 'Hide' when labels overlap
• Choose labelPosition based on chart layout needs
• Keep label font sizes readable (12px-14px recommended)
• Use contrasting label colors for better visibility

Gridlines

• Enable major gridlines for primary reference points
• Use minor gridlines sparingly (count: 1-3) to avoid clutter
• Apply lighter opacity to minor gridlines (0.3-0.5)
• Use dashed patterns for minor gridlines to differentiate from major ones

Axis Lines

• Keep axis lines visible for chart structure clarity
• Use solid lines (dashArray: '0') for axis lines
• Increase width (2-3px) for emphasis if needed
• Hide axis lines only when gridlines provide sufficient context

Visual Hierarchy

• Major gridlines: Higher opacity (0.7-1.0), solid or subtle dash
• Minor gridlines: Lower opacity (0.3-0.5), dashed
• Axis lines: Highest contrast and width
• Labels: Clear, readable font with appropriate size

Accessibility

• Ensure sufficient color contrast for labels and gridlines
• Avoid relying solely on color to convey information
• Use adequate line widths for visibility
• Test readability at different zoom levels

Performance

• Limit minor gridline count (1-3) to reduce rendering complexity
• Hide unused elements (set visible: false) rather than using opacity: 0
• Use simpler dash patterns for better performance

Common Use Cases

Technical Documentation

Use high-contrast, clear gridlines with bold labels:

horizontalAxis={{
  labelStyle: { size: '13px', fontWeight: 'Bold' },
  majorGridLines: { visible: true, width: 1.5 },
  minorGridLines: { visible: true, count: 2 }
}}

Interactive Dashboards

Use subtle gridlines to focus on data interaction:

horizontalAxis={{
  labelStyle: { size: '11px', opacity: 0.7 },
  majorGridLines: { visible: true, opacity: 0.4 },
  minorGridLines: { visible: false }
}}

Printed Reports

Maximize contrast and clarity:

horizontalAxis={{
  labelStyle: { size: '14px', color: '#000000', fontWeight: 'Bold' },
  majorGridLines: { visible: true, width: 2, opacity: 1 },
  axisLine: { visible: true, width: 3 }
}}

This comprehensive guide provides all the information needed to configure Smith Chart axes for optimal data visualization and user experience.

Dimensions and Sizing

Table of contents

• Overview
• Container-Based Sizing
• Using Inline Styles
• Using CSS Classes
• Responsive Container Sizing
• Pixel-Based Sizing
• Basic Pixel Sizing
• Standard Size Presets
• Dynamic Pixel Sizing
• Percentage-Based Sizing
• Basic Percentage Sizing
• Partial Percentage Sizing
• Responsive Grid Layout
• Choosing the Right Approach
• Use Container-Based Sizing When
• Use Pixel-Based Sizing When
• Use Percentage-Based Sizing When
• Complete Examples
• Full-Screen Chart
• Dashboard Card Layout
• Responsive Multi-Chart View
• Window Resize Handler
• Best Practices
• Aspect Ratio
• Minimum Dimensions
• Maximum Dimensions
• Mobile Considerations
• Print-Friendly Sizing

Overview

You can render the Smith Chart with dimensions that correspond to its container size or specify exact dimensions using the width and height properties. Smith Charts support three primary sizing approaches: container-based, pixel-based, and percentage-based sizing.

Container-Based Sizing

Render the Smith Chart to match its container's size by specifying the container's dimensions using inline styles or CSS. The chart will automatically adapt to the container's width and height.

Using Inline Styles

Define the container size directly in the JSX using the style attribute:

import * as React from "react";
import { SmithchartComponent, SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <div style={{ width: '650px', height: '350px' }}>
      <SmithchartComponent id="smithchart">
        <SmithChartSeriesCollectionDirective>
          <SmithChartSeriesDirective points={data} />
        </SeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Using CSS Classes

Define container dimensions in CSS for better separation of concerns:

App.css:

.smith-chart-container {
  width: 650px;
  height: 350px;
}

App.tsx:

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
import './App.css';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <div className="smith-chart-container">
      <SmithchartComponent id="smithchart">
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective points={data} />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Responsive Container Sizing

Create responsive containers that adapt to viewport size:

App.css:

.responsive-container {
  width: 100%;
  max-width: 800px;
  height: 400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .responsive-container {
    height: 300px;
  }
}

App.tsx:

import * as React from "react";
import { SmithchartComponent, SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';
import './App.css';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <div className="responsive-container">
      <SmithchartComponent id="smithchart">
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective points={data} />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Pixel-Based Sizing

Directly set the chart dimensions in pixels using the width and height properties. This provides precise control over chart size.

Basic Pixel Sizing

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      width="700px"
      height="400px"
    >
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective points={data} />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Standard Size Presets

Common chart sizes for different use cases:

Small (Dashboard tile):

<SmithchartComponent
  id="smithchart"
  width="400px"
  height="300px"
>
  {/* series configuration */}
</SmithchartComponent>

Medium (Standard view):

<SmithchartComponent
  id="smithchart"
  width="700px"
  height="500px"
>
  {/* series configuration */}
</SmithchartComponent>

Large (Detailed analysis):

<SmithchartComponent
  id="smithchart"
  width="1000px"
  height="700px"
>
  {/* series configuration */}
</SmithchartComponent>

Dynamic Pixel Sizing

Adjust chart size based on state or props:

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const [chartSize, setChartSize] = React.useState({ width: '600px', height: '400px' });

  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  const sizes = {
    small: { width: '400px', height: '300px' },
    medium: { width: '600px', height: '400px' },
    large: { width: '800px', height: '600px' }
  };

  return (
    <div>
      <div>
        <button onClick={() => setChartSize(sizes.small)}>Small</button>
        <button onClick={() => setChartSize(sizes.medium)}>Medium</button>
        <button onClick={() => setChartSize(sizes.large)}>Large</button>
      </div>

      <SmithchartComponent
        id="smithchart"
        width={chartSize.width}
        height={chartSize.height}
      >
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective points={data} />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Percentage-Based Sizing

Specify dimensions as percentages to create responsive charts that scale relative to their container.

Basic Percentage Sizing

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <div style={{ width: '800px', height: '600px' }}>
      <SmithchartComponent
        id="smithchart"
        width="100%"
        height="100%"
      >
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective points={data} />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

In this example:

• Chart width: 100% of 800px = 800px
• Chart height: 100% of 600px = 600px

Partial Percentage Sizing

Use percentages less than 100% to size the chart relative to its container:

<div style={{ width: '1000px', height: '700px', border: '1px solid #ccc' }}>
  <SmithchartComponent
    id="smithchart"
    width="80%"   {/* 80% of 1000px = 800px */}
    height="75%"  {/* 75% of 700px = 525px */}
  >
    <SmithchartSeriesCollectionDirective>
      <SmithchartSeriesDirective points={data} />
    </SmithchartSeriesCollectionDirective>
  </SmithchartComponent>
</div>

Responsive Grid Layout

Use percentage sizing with CSS Grid or Flexbox:

App.css:

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
}

.chart-cell {
  border: 1px solid #ddd;
  padding: 10px;
  height: 400px;
}

App.tsx:

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
import './App.css';

function App() {
  const data1 = [{ resistance: 0, reactance: 0.05 }, { resistance: 1.0, reactance: 0.5 }];
  const data2 = [{ resistance: 0.2, reactance: 0.1 }, { resistance: 1.2, reactance: 0.6 }];

  return (
    <div className="chart-grid">
      <div className="chart-cell">
        <SmithchartComponent id="chart1" width="100%" height="100%">
          <SmithchartSeriesCollectionDirective>
            <SmithchartSeriesDirective name="Chart 1" points={data1} />
          </SmithchartSeriesCollectionDirective>
        </SmithchartComponent>
      </div>
      
      <div className="chart-cell">
        <SmithchartComponent id="chart2" width="100%" height="100%">
          <SmithchartSeriesCollectionDirective>
            <SmithchartSeriesDirective name="Chart 2" points={data2} />
          </SmithchartSeriesCollectionDirective>
        </SmithchartComponent>
      </div>
    </div>
  );
}

export default App;

Choosing the Right Approach

Use Container-Based Sizing When:

• Building responsive layouts
• Chart size should adapt to viewport changes
• Working with CSS frameworks (Bootstrap, Material-UI, Tailwind)
• Size determined by parent layout constraints
• Need media queries for different screen sizes

Advantages:

• CSS-driven responsiveness
• Easier to maintain with design systems
• Better separation of concerns
• Works well with CSS Grid and Flexbox

Use Pixel-Based Sizing When:

• Need exact, predictable dimensions
• Creating fixed-size dashboard tiles
• Generating charts for specific print dimensions
• Requirements specify exact pixel measurements
• Chart appears in modals or fixed-size containers

Advantages:

• Precise control over dimensions
• Consistent rendering across different contexts
• Predictable layout behavior
• Easier to test and debug

Use Percentage-Based Sizing When:

• Building fluid, scalable layouts
• Chart should fill variable-sized containers
• Creating multi-chart dashboards
• Supporting multiple screen resolutions
• Chart lives in resizable panels or split views

Advantages:

• Automatic scaling with container
• Maintains aspect ratio
• Works well with responsive containers
• Adapts to dynamic layout changes

Complete Examples

Full-Screen Chart

import * as React from "react";
import { createRoot } from "react-dom/client";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <div style={{ width: '100vw', height: '100vh', padding: '20px', boxSizing: 'border-box' }}>
      <SmithchartComponent
        id="smithchart"
        width="100%"
        height="100%"
        title={{ text: 'Full-Screen Smith Chart' }}
      >
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective points={data} />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Dashboard Card Layout

import * as React from "react";
import { createRoot } from "react-dom/client";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  const cardStyle = {
    width: '450px',
    height: '350px',
    border: '1px solid #ddd',
    borderRadius: '8px',
    padding: '15px',
    boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
  };

  return (
    <div style={cardStyle}>
      <SmithchartComponent
        id="smithchart"
        width="100%"
        height="100%"
        title={{ text: 'Impedance Analysis' }}
      >
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective points={data} />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Responsive Multi-Chart View

import * as React from "react";
import { createRoot } from "react-dom/client";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data1 = [{ resistance: 0, reactance: 0.05 }, { resistance: 1.0, reactance: 0.5 }];
  const data2 = [{ resistance: 0.2, reactance: 0.1 }, { resistance: 1.2, reactance: 0.6 }];
  const data3 = [{ resistance: 0.3, reactance: 0.15 }, { resistance: 1.3, reactance: 0.65 }];

  const containerStyle = {
    display: 'flex',
    flexWrap: 'wrap' as const,
    gap: '20px',
    padding: '20px'
  };

  const chartBoxStyle = {
    flex: '1 1 calc(50% - 10px)',
    minWidth: '400px',
    height: '350px',
    border: '1px solid #ddd',
    padding: '10px'
  };

  return (
    <div style={containerStyle}>
      <div style={chartBoxStyle}>
        <SmithchartComponent id="chart1" width="100%" height="100%" title={{ text: 'Chart 1' }}>
          <SmithchartSeriesCollectionDirective>
            <SmithchartSeriesDirective points={data1} />
          </SmithchartSeriesCollectionDirective>
        </SmithchartComponent>
      </div>

      <div style={chartBoxStyle}>
        <SmithchartComponent id="chart2" width="100%" height="100%" title={{ text: 'Chart 2' }}>
          <SmithchartSeriesCollectionDirective>
            <SmithchartSeriesDirective points={data2} />
          </SmithchartSeriesCollectionDirective>
        </SmithchartComponent>
      </div>

      <div style={chartBoxStyle}>
        <SmithchartComponent id="chart3" width="100%" height="100%" title={{ text: 'Chart 3' }}>
          <SmithchartSeriesCollectionDirective>
            <SmithchartSeriesDirective points={data3} />
          </SmithchartSeriesCollectionDirective>
        </SmithchartComponent>
      </div>
    </div>
  );
}

export default App;

Window Resize Handler

Dynamic sizing based on window dimensions:

import * as React from "react";
import { createRoot } from "react-dom/client";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const [dimensions, setDimensions] = React.useState({
    width: window.innerWidth * 0.8,
    height: window.innerHeight * 0.6
  });

  React.useEffect(() => {
    const handleResize = () => {
      setDimensions({
        width: window.innerWidth * 0.8,
        height: window.innerHeight * 0.6
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <SmithchartComponent
        id="smithchart"
        width={`${dimensions.width}px`}
        height={`${dimensions.height}px`}
        title={{ text: 'Resizable Smith Chart' }}
      >
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective points={data} />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Best Practices

Aspect Ratio

Smith Charts work best with aspect ratios close to 4:3 or 16:9:

• 4:3 ratio: 800×600, 640×480, 1024×768
• 16:9 ratio: 800×450, 1280×720, 1600×900
• Square: 600×600, 800×800 (also acceptable)

Minimum Dimensions

Maintain minimum dimensions for readability:

• Minimum width: 400px (smaller reduces readability)
• Minimum height: 300px (smaller compromises axis labels)
• Recommended minimum: 500×400px for optimal viewing

Maximum Dimensions

Consider practical limits:

• Maximum width: 2000px (larger may reduce performance)
• Maximum height: 1500px (chart detail doesn't scale indefinitely)
• Recommended maximum: 1200×900px for most use cases

Mobile Considerations

For mobile devices:

.smith-chart-mobile {
  width: 100%;
  height: 300px;
  max-width: 500px;
}

Print-Friendly Sizing

For print layouts, use pixel sizing:

<SmithchartComponent
  id="print-chart"
  width="700px"   // Standard print width
  height="525px"  // 4:3 aspect ratio
>
  {/* series configuration */}
</SmithchartComponent>

This comprehensive guide covers all sizing approaches for Smith Charts, enabling you to create charts that work perfectly in any layout or device context.

Getting Started with Smith Charts

Table of Contents

• Overview
• Dependencies
• Installation and Configuration
• Installing Syncfusion Package
• Basic Implementation
• Module Injection
• Adding Series
• Adding Title
• Enabling Markers
• Enabling Data Labels
• Enabling Legend
• Enabling Tooltips
• Complete Working Example

Overview

This guide walks you through creating a simple Smith Chart and demonstrates the basic usage of the Syncfusion React Smith Chart component. Smith Charts are specialized diagrams used in electrical engineering to visualize transmission line parameters, impedance matching, and RF circuit characteristics.

Dependencies

Below is the list of minimum dependencies required to use the Smith Chart component:

|-- @syncfusion/ej2-react-charts
    |-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-svg-base
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-react-base

Installation and Configuration

Using Vite (Recommended)

To easily set up a React application, use the Vite CLI, which provides a faster development environment, smaller bundle sizes, and optimized builds.

Create a new React application:

npm create vite@latest my-app

This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.

For TypeScript environment:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

For JavaScript environment:

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

Using create-react-app (Alternative)

If you prefer the traditional approach:

npx create-react-app my-app
cd my-app
npm start

Installing Syncfusion Package

All Syncfusion Essential JS 2 packages are published in the `npmjs.com` public registry.

To install the Smith Chart package, use the following command:

npm install @syncfusion/ej2-react-charts --save

The --save flag will include the Smith Chart package in the dependencies section of the package.json.

Basic Implementation

Add the Smith Chart component to src/App.tsx (or src/App.jsx for JavaScript) using the following code:

import * as React from "react";
import { SmithchartComponent } from '@syncfusion/ej2-react-charts';

function App() {
  return <SmithchartComponent></SmithchartComponent>;
}

export default App;

Now run the development server:

npm run dev

This will render a basic empty Smith Chart with default settings.

Module Injection

Smith Chart features are segregated into individual feature-wise modules. To use a particular feature, you need to inject its feature service into the component.

Available Feature Modules

• `SmithchartLegend` - Inject this module to use legend feature
• `TooltipRender` - Inject this module to use tooltip feature

Import these modules from the chart package and inject them into the services section of the Smith Chart component:

import * as React from "react";
import { SmithchartComponent, SmithchartLegend, TooltipRender, Inject } from '@syncfusion/ej2-react-charts';

function App() {
  return (
    <SmithchartComponent>
      <Inject services={[SmithchartLegend, TooltipRender]} />
    </SmithchartComponent>
  );
}

export default App;

Adding Series

Smith Chart has two specifications for adding series data:

Method 1: Using dataSource

Bind a data object directly by specifying resistance and reactance field names. The series renders from the provided dataSource.

import * as React from "react";
import { SmithchartComponent,SmithchartSeriesCollectionDirective , SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const transmissionData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0, reactance: 0.1 },
    { resistance: 0, reactance: 0.2 },
    { resistance: 0.3, reactance: 0.3 },
    { resistance: 0.5, reactance: 0.4 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent id="smithchart">
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          dataSource={transmissionData}
          resistance="resistance"
          reactance="reactance"
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Method 2: Using points

Provide a collection of resistance and reactance value points directly:

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const transmissionPoints = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0, reactance: 0.1 },
    { resistance: 0, reactance: 0.2 },
    { resistance: 0.3, reactance: 0.3 },
    { resistance: 0.5, reactance: 0.4 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent id="smithchart">
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective points={transmissionPoints} />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Adding Title

You can add a title to the Smith Chart to provide quick information about the data being plotted:

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const transmissionData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.3, reactance: 0.2 },
    { resistance: 1.0, reactance: 0.4 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Transmission Line Impedance Analysis' }}
    >
      <SmithchartSeriesCollectionDirective>
        <SmithChartSeriesDirective points={transmissionData} />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Enabling Markers

You can add markers to data points by setting the visible property to true in the marker object:

<SmithChartSeriesDirective
  points={transmissionData}
  marker={{ visible: true }}
/>

Enabling Data Labels

Add data labels to improve readability by setting the visible property to true in the dataLabel object within marker settings:

<SmithChartSeriesDirective
  points={transmissionData}
  marker={{
    visible: true,
    dataLabel: { visible: true }
  }}
/>

Data labels are arranged smartly to avoid overlapping based on the series configuration.

Enabling Legend

Enable legend by setting the visible property to true in legendSettings and injecting the SmithchartLegend module:

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';

function App() {
  const series1Data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.3, reactance: 0.2 },
    { resistance: 1.0, reactance: 0.4 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      legendSettings={{ visible: true }}
    >
      <Inject services={[SmithchartLegend]} />
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          name="Transmission Line 1"
          points={series1Data}
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Customize the series name using the name property in SeriesDirective.

Enabling Tooltips

Enable tooltips by setting the visible property to true in the tooltip object and injecting the TooltipRender module:

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, TooltipRender } from '@syncfusion/ej2-react-charts';

function App() {
  const transmissionData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.3, reactance: 0.2 },
    { resistance: 1.0, reactance: 0.4 }
  ];

  return (
    <SmithchartComponent id="smithchart">
      <Inject services={[TooltipRender]} />
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          points={transmissionData}
          tooltip={{ visible: true }}
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Tooltips display point information when hovering over data points with the mouse.

Complete Working Example

Here's a complete example combining all the features:

import * as React from 'react';
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';

function App() {
  // First transmission line data
  const transmission1Data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0, reactance: 0.1 },
    { resistance: 0, reactance: 0.2 },
    { resistance: 0.3, reactance: 0.3 },
    { resistance: 0.5, reactance: 0.4 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  // Second transmission line data
  const transmission2Data = [
    { resistance: 0.1, reactance: 0.1 },
    { resistance: 0.2, reactance: 0.2 },
    { resistance: 0.4, reactance: 0.3 },
    { resistance: 0.6, reactance: 0.4 },
    { resistance: 0.8, reactance: 0.5 },
    { resistance: 1.2, reactance: 0.6 }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <SmithchartComponent
        id="smithchart"
        title={{ text: 'Transmission Line Impedance Analysis' }}
        legendSettings={{ visible: true, position: 'Bottom' }}
      >
        <Inject services={[SmithchartLegend, TooltipRender]} />
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective
            name="Transmission Line 1"
            points={transmission1Data}
            marker={{
              visible: true,
              dataLabel: { visible: true }
            }}
            tooltip={{ visible: true }}
          />
          <SmithchartSeriesDirective
            name="Transmission Line 2"
            points={transmission2Data}
            marker={{
              visible: true,
              dataLabel: { visible: true }
            }}
            tooltip={{ visible: true }}
          />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

CSS Theme Import

Important: CSS theme imports are NOT required for Smith Chart to function. The component renders and works perfectly without any theme CSS.

Theme CSS is only needed if you want to apply Syncfusion's predefined visual styling. Available theme options are:

• material.css - Material Design theme
• bootstrap.css - Bootstrap theme
• fabric.css - Office Fabric theme
• bootstrap5.css - Bootstrap 5 theme
• tailwind.css - Tailwind CSS theme
• fluent.css - Fluent UI theme

When CSS imports are optional:

• Building custom styled components with your own CSS
• Using external CSS frameworks (Bootstrap, Tailwind)
• Keeping bundle size minimal
• The default browser styling is sufficient for your needs

Smith Chart renders with default browser styles without any CSS imports, making it lightweight and flexible for custom styling.

Next Steps

Now that you have a basic Smith Chart running, you can explore:

• Customizing series appearance (colors, line width, opacity)
• Configuring horizontal and radial axes
• Advanced marker and data label customization
• Legend positioning and styling
• Chart dimensions and responsive sizing
• Print and export functionality
• Accessibility features

Each of these features is covered in detail in the respective reference files.

Legend Configuration

Table of contents

• Overview
• Enabling Legend
• Position and Alignment
• Position
• Standard Positions
• Custom Position
• Alignment
• Legend Customization
• Legend Shape
• Legend Size
• Legend Padding
• itemPadding
• shapePadding
• Toggle Visibility
• Complete Examples
• Fully Customized Legend
• Legend with Custom Position
• Compact Legend for Dashboards
• Presentation-Ready Legend
• Best Practices
• Position Selection
• Alignment Guidelines
• Shape Selection
• Size Recommendations
• Padding Guidelines
• Toggle Visibility
• Common Patterns
• Dynamic Legend Position
• Conditional Legend Visibility
• Series Name Formatting

Overview

Legends are keys used in Smith Charts that contain symbols and descriptions. They provide valuable information for interpreting what the chart displays, showing series names with corresponding colors, shapes, or other identifiers. Legends help users quickly identify and distinguish between multiple data series.

Enabling Legend

By default, legend visibility is false. To enable the legend, you must:

1. Set the visible property to true in legendSettings 2. Inject the SmithchartLegend module

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';

function App() {
  const transmission1 = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  const transmission2 = [
    { resistance: 0.2, reactance: 0.1 },
    { resistance: 0.6, reactance: 0.35 },
    { resistance: 1.2, reactance: 0.6 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      legendSettings={{ visible: true }}
    >
      <Inject services={[SmithchartLegend]} />
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          name="Transmission Line 1"
          points={transmission1}
        />
        <SmithchartSeriesDirective
          name="Transmission Line 2"
          points={transmission2}
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Important: Each series should have a name property for legend display. Without names, legends will show generic labels.

Position and Alignment

Position

The position property controls where the legend appears relative to the chart.

Available positions:

• 'Top' - Above the chart
• 'Bottom' - Below the chart (default)
• 'Left' - Left side of the chart
• 'Right' - Right side of the chart
• 'Custom' - Custom coordinates using x and y properties

Standard Positions

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';

function App() {
  const data1 = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 }
  ];

  const data2 = [
    { resistance: 0.2, reactance: 0.1 },
    { resistance: 0.7, reactance: 0.4 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      legendSettings={{
        visible: true,
        position: 'Top'  // 'Top', 'Bottom', 'Left', or 'Right'
      }}
    >
      <Inject services={[SmithchartLegend]} />
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective name="Series 1" points={data1} />
        <SmithchartSeriesDirective name="Series 2" points={data2} />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Custom Position

For precise legend placement, use custom positioning with x and y coordinates:

<SmithchartComponent
  id="smithchart"
  legendSettings={{
    visible: true,
    position: 'Custom',
    x: 50,   // X coordinate in pixels
    y: 10    // Y coordinate in pixels
  }}
>
  <Inject services={[SmithchartLegend]} />
  {/* series configuration */}
</SmithchartComponent>

Use custom positioning when:

• Standard positions don't meet layout requirements
• You need legends overlaying the chart
• Building custom dashboard layouts
• Integrating with other UI elements

Alignment

The alignment property controls legend alignment within its positioned area.

Available alignments:

• 'Near' - Aligns to the start (left for horizontal, top for vertical)
• 'Center' - Centers the legend (default)
• 'Far' - Aligns to the end (right for horizontal, bottom for vertical)

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';

function App() {
  const data1 = [{ resistance: 0, reactance: 0.05 }, { resistance: 0.5, reactance: 0.3 }];
  const data2 = [{ resistance: 0.2, reactance: 0.1 }, { resistance: 0.7, reactance: 0.4 }];

  return (
    <SmithchartComponent
      id="smithchart"
      legendSettings={{
        visible: true,
        position: 'Bottom',
        alignment: 'Far'  // 'Near', 'Center', or 'Far'
      }}
    >
      <Inject services={[SmithchartLegend]} />
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective name="Line 1" points={data1} />
        <SmithchartSeriesDirective name="Line 2" points={data2} />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Legend Customization

Legend Shape

The shape property changes the symbol displayed in the legend.

Available shapes:

• 'Circle' (default)
• 'Rectangle'
• 'Triangle'
• 'Diamond'
• 'Pentagon'
• 'InvertedTriangle'

<SmithchartComponent
  id="smithchart"
  legendSettings={{
    visible: true,
    shape: 'Rectangle'
  }}
>
  <Inject services={[SmithchartLegend]} />
  {/* series configuration */}
</SmithchartComponent>

The shape color automatically matches the series color.

Legend Size

Control legend dimensions using width and height properties.

Default behavior:

• Horizontal position (Top/Bottom): Legend takes 20-25% of chart height
• Vertical position (Left/Right): Legend takes 20-25% of chart width

Custom sizing:

<SmithchartComponent
  id="smithchart"
  legendSettings={{
    visible: true,
    width: '200px',
    height: '100px'
  }}
>
  <Inject services={[SmithchartLegend]} />
  {/* series configuration */}
</SmithchartComponent>

Specify sizes in:

• Pixels: '200px', '100px'
• Percentage: '50%', '25%'

Legend Padding

Control spacing within and around the legend.

itemPadding

Space between individual legend items:

<SmithchartComponent
  id="smithchart"
  legendSettings={{
    visible: true,
    itemPadding: 15  // Pixels between legend items
  }}
>
  <Inject services={[SmithchartLegend]} />
  {/* series configuration */}
</SmithchartComponent>

shapePadding

Space between legend shape and text:

<SmithchartComponent
  id="smithchart"
  legendSettings={{
    visible: true,
    shapePadding: 10  // Pixels between shape and text
  }}
>
  <Inject services={[SmithchartLegend]} />
  {/* series configuration */}
</SmithchartComponent>

Toggle Visibility

The toggleVisibility property enables users to show/hide series by clicking legend items.

By default, this property is set to true, allowing interactive legend toggling.

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';

function App() {
  const data1 = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  const data2 = [
    { resistance: 0.2, reactance: 0.1 },
    { resistance: 0.7, reactance: 0.4 },
    { resistance: 1.2, reactance: 0.6 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Click Legend Items to Toggle Series' }}
      legendSettings={{
        visible: true,
        toggleVisibility: true  // Enable clicking to show/hide series
      }}
    >
      <Inject services={[SmithchartLegend]} />
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective name="50Ω Line" points={data1} fill="#3498db" />
        <SmithchartSeriesDirective name="75Ω Line" points={data2} fill="#e74c3c" />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

To disable toggle functionality:

legendSettings={{
  visible: true,
  toggleVisibility: false
}}

Complete Examples

Fully Customized Legend

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';

function App() {
  const line1 = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.3, reactance: 0.2 },
    { resistance: 0.8, reactance: 0.4 }
  ];

  const line2 = [
    { resistance: 0.1, reactance: 0.1 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.1, reactance: 0.55 }
  ];

  const line3 = [
    { resistance: 0.2, reactance: 0.15 },
    { resistance: 0.6, reactance: 0.35 },
    { resistance: 1.2, reactance: 0.6 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Transmission Line Comparison' }}
      legendSettings={{
        visible: true,
        position: 'Bottom',
        alignment: 'Center',
        shape: 'Diamond',
        itemPadding: 20,
        shapePadding: 12,
        toggleVisibility: true
      }}
    >
      <Inject services={[SmithchartLegend]} />
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          name="50Ω Coaxial Line"
          points={line1}
          fill="#3498db"
          width={2}
        />
        <SmithchartSeriesDirective
          name="75Ω Coaxial Line"
          points={line2}
          fill="#e74c3c"
          width={2}
        />
        <SmithchartSeriesDirective
          name="100Ω Twisted Pair"
          points={line3}
          fill="#2ecc71"
          width={2}
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Legend with Custom Position

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';

function App() {
  const data1 = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 }
  ];

  const data2 = [
    { resistance: 0.2, reactance: 0.1 },
    { resistance: 0.7, reactance: 0.4 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Custom Legend Position' }}
      legendSettings={{
        visible: true,
        position: 'Custom',
        x: 500,
        y: 50,
        width: '150px',
        height: '60px',
        shape: 'Rectangle',
        itemPadding: 10,
        shapePadding: 8
      }}
    >
      <Inject services={[SmithchartLegend]} />
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective name="Measured" points={data1} fill="#9b59b6" />
        <SmithchartSeriesDirective name="Simulated" points={data2} fill="#f39c12" />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Compact Legend for Dashboards

<SmithchartComponent
  id="smithchart"
  legendSettings={{
    visible: true,
    position: 'Right',
    alignment: 'Near',
    shape: 'Circle',
    width: '120px',
    itemPadding: 8,
    shapePadding: 6,
    toggleVisibility: true
  }}
>
  <Inject services={[SmithchartLegend]} />
  <SmithchartSeriesCollectionDirective>
    <SmithchartSeriesDirective name="Line A" points={dataA} fill="#1abc9c" />
    <SmithchartSeriesDirective name="Line B" points={dataB} fill="#e67e22" />
    <SmithchartSeriesDirective name="Line C" points={dataC} fill="#34495e" />
  </SmithchartSeriesCollectionDirective>
</SmithchartComponent>

Presentation-Ready Legend

High-contrast, large text for presentations:

<SmithchartComponent
  id="smithchart"
  title={{ text: 'RF Circuit Analysis', textStyle: { size: '18px', fontWeight: 'Bold' } }}
  legendSettings={{
    visible: true,
    position: 'Bottom',
    alignment: 'Center',
    shape: 'Rectangle',
    width: '500px',
    height: '100px',
    itemPadding: 25,
    shapePadding: 15,
    toggleVisibility: false  // Disable for presentations
  }}
>
  <Inject services={[SmithchartLegend]} />
  <SmithchartSeriesCollectionDirective>
    <SmithchartSeriesDirective name="Input Impedance" points={data1} fill="#2c3e50" width={3} />
    <SmithchartSeriesDirective name="Output Impedance" points={data2} fill="#c0392b" width={3} />
  </SmithchartSeriesCollectionDirective>
</SmithchartComponent>

Best Practices

Position Selection

Bottom position (default):

• Best for most use cases
• Doesn't obscure chart data
• Works well with horizontal aspect ratios

Top position:

• Use when bottom space is constrained
• Good for vertically-oriented layouts

Left/Right positions:

• Best for dashboards with limited vertical space
• Works well with wide aspect ratios
• Good for 3+ series with long names

Custom position:

• Use sparingly for special layouts
• Test across different screen sizes
• Ensure legend doesn't obscure critical data

Alignment Guidelines

• Center: Default, works for most scenarios
• Near: Use when chart has right-side content or annotations
• Far: Use when chart has left-side content

Shape Selection

• Circle: Universal, works for all series types
• Rectangle: Good for area/bar-style visualizations
• Diamond/Triangle: Use to match marker shapes in the series
• Pentagon: Distinctive, good for highlighting special series

Size Recommendations

Width:

• Compact: 100-150px (few series, short names)
• Standard: 200-300px (typical use)
• Expanded: 400-500px (many series or long names)

Height:

• Compact: 40-60px (2-3 series)
• Standard: 80-100px (4-6 series)
• Expanded: 120-150px (7+ series)

Padding Guidelines

itemPadding:

• Compact layouts: 8-12px
• Standard: 15-20px
• Presentation: 20-30px

shapePadding:

• Compact: 6-8px
• Standard: 10-12px
• Presentation: 12-18px

Toggle Visibility

Enable when:

• Users need to compare subsets of series
• Chart has 3+ series that may overlap
• Interactive exploration is desired
• Dashboard allows user customization

Disable when:

• All series must always be visible
• Creating static reports or presentations
• Users shouldn't modify visualization
• Series are critical for interpretation

Common Patterns

Dynamic Legend Position

Switch legend position based on screen size or user preference:

import * as React from "react";
import { SmithchartComponent, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';

function App() {
  const [legendPos, setLegendPos] = React.useState('Bottom');

  return (
    <>
      <select value={legendPos} onChange={(e) => setLegendPos(e.target.value)}>
        <option value="Top">Top</option>
        <option value="Bottom">Bottom</option>
        <option value="Left">Left</option>
        <option value="Right">Right</option>
      </select>

      <SmithchartComponent
        id="smithchart"
        legendSettings={{
          visible: true,
          position: legendPos
        }}
      >
        <Inject services={[SmithchartLegend]} />
        {/* series configuration */}
      </SmithchartComponent>
    </>
  );
}

Conditional Legend Visibility

Show legend only when multiple series are present:

function App() {
  const seriesData = [/* array of series data */];
  const showLegend = seriesData.length > 1;

  return (
    <SmithchartComponent
      id="smithchart"
      legendSettings={{
        visible: showLegend
      }}
    >
      <Inject services={[SmithchartLegend]} />
      {/* series configuration */}
    </SmithchartComponent>
  );
}

Series Name Formatting

Use descriptive, concise names:

// Good: Descriptive and concise
<SmithchartSeriesDirective name="50Ω @ 2.4GHz" points={data1} />
<SmithchartSeriesDirective name="75Ω @ 2.4GHz" points={data2} />

// Avoid: Too verbose
<SmithchartSeriesDirective name="Transmission Line with 50 Ohm Impedance at 2.4 Gigahertz" points={data1} />

// Avoid: Too vague
<SmithchartSeriesDirective name="Line 1" points={data1} />

This comprehensive guide covers all aspects of legend configuration in Smith Charts, enabling you to create clear, informative visualizations with effective series identification.

Markers and Data Labels

Table of contents

• Overview
• Markers
• Enabling Markers
• Marker Customization
• width and height
• fill
• opacity
• border
• shape
• Complete Marker Example
• Data Labels
• Enabling Data Labels
• Smart Label Arrangement
• Data Label Customization
• fill
• opacity
• border
• textStyle
• Complete Data Label Example
• Complete Examples
• Best Practices
• Marker Selection
• Marker size guidelines
• Shape selection
• Data Label Usage
• Color and Contrast
• Performance Considerations
• Visual Hierarchy
• Common Patterns
• Conditional Marker Visibility
• Series-Specific Styling
• Responsive Marker Sizing

Overview

Markers and data labels provide information about individual data points in Smith Chart series. Markers are visual shapes that highlight data points, while data labels display the actual values. By default, both are disabled, but they can be enabled and extensively customized for each series independently.

Markers

Markers are shapes (circles, diamonds, triangles, etc.) that adorn each data point on the series line. They improve visibility and help users identify specific measurement points.

Enabling Markers

Set the visible property to true in the marker object:

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.3, reactance: 0.2 },
    { resistance: 0.8, reactance: 0.4 }
  ];

  return (
    <SmithchartComponent id="smithchart">
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          points={data}
          marker={{ visible: true }}
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Marker Customization

Each series can have uniquely styled markers using the following properties:

width and height

Control the size of markers in pixels.

<SmithchartSeriesDirective
  points={data}
  marker={{
    visible: true,
    width: 10,
    height: 10
  }}
/>

Recommendations:

• Small markers (6-8px): For dense data with many points
• Medium markers (10-12px): Standard visibility
• Large markers (14-16px): Emphasis on specific series

fill

Customizes the fill color of the marker.

<SmithchartSeriesDirective
  points={data}
  marker={{
    visible: true,
    fill: '#FF5733'
  }}
/>

Supported color formats:

• Named colors: 'red', 'blue', 'green'
• Hex: '#FF5733', '#3498DB'
• RGB: 'rgb(255, 99, 71)'
• RGBA: 'rgba(255, 99, 71, 0.8)'

opacity

Controls the transparency of the marker (0 to 1).

<SmithchartSeriesDirective
  points={data}
  marker={{
    visible: true,
    opacity: 0.7
  }}
/>

Use opacity to:

• Create visual hierarchy
• Show overlapping markers more clearly
• De-emphasize less important data points

border

Customizes the border of markers with width and color properties.

<SmithchartSeriesDirective
  points={data}
  marker={{
    visible: true,
    border: {
      width: 2,
      color: '#333333'
    }
  }}
/>

Borders improve marker visibility against similar-colored backgrounds.

shape

Changes the geometric shape of the marker.

Available shapes:

• 'Circle' (default)
• 'Rectangle'
• 'Triangle'
• 'Diamond'
• 'Pentagon'
• 'InvertedTriangle'

<SmithchartSeriesDirective
  points={data}
  marker={{
    visible: true,
    shape: 'Diamond'
  }}
/>

Use different shapes to distinguish between multiple series when colors alone aren't sufficient.

Complete Marker Example

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const transmissionData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.2, reactance: 0.15 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 0.8, reactance: 0.4 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Custom Markers' }}
    >
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          name="Transmission Line"
          points={transmissionData}
          marker={{
            visible: true,
            width: 12,
            height: 12,
            shape: 'Diamond',
            fill: '#e74c3c',
            opacity: 0.9,
            border: {
              width: 2,
              color: '#c0392b'
            }
          }}
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Data Labels

Data labels display the resistance and reactance values directly on the chart at each data point, improving readability when space allows.

Enabling Data Labels

Set the visible property to true in the dataLabel object within marker settings:

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent id="smithchart">
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          points={data}
          marker={{
            visible: true,
            dataLabel: {
              visible: true
            }
          }}
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Smart Label Arrangement

Data labels are automatically arranged to avoid overlapping with each other, improving chart readability. This smart positioning is built-in and requires no additional configuration.

Data Label Customization

Customize data labels using the following properties:

fill

Changes the background color of the data label shape.

<SmithchartSeriesDirective
  points={data}
  marker={{
    visible: true,
    dataLabel: {
      visible: true,
      fill: '#ffffff'
    }
  }}
/>

opacity

Controls the transparency of the data label background (0 to 1).

<SmithchartSeriesDirective
  points={data}
  marker={{
    visible: true,
    dataLabel: {
      visible: true,
      opacity: 0.8
    }
  }}
/>

border

Customizes the border around data labels.

<SmithchartSeriesDirective
  points={data}
  marker={{
    visible: true,
    dataLabel: {
      visible: true,
      border: {
        width: 1,
        color: '#cccccc'
      }
    }
  }}
/>

textStyle

Customizes the font properties of data label text.

Available properties:

• size - Font size (e.g., '10px', '12px')
• color - Text color
• fontFamily - Font family name
• fontWeight - Font weight ('Normal', 'Bold')
• opacity - Text opacity (0 to 1)

<SmithchartSeriesDirective
  points={data}
  marker={{
    visible: true,
    dataLabel: {
      visible: true,
      textStyle: {
        size: '11px',
        color: '#333333',
        fontFamily: 'Arial',
        fontWeight: 'Bold',
        opacity: 1
      }
    }
  }}
/>

Complete Data Label Example

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const impedanceData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.3, reactance: 0.2 },
    { resistance: 0.6, reactance: 0.35 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Impedance with Data Labels' }}
    >
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          name="Impedance Data"
          points={impedanceData}
          marker={{
            visible: true,
            width: 10,
            height: 10,
            shape: 'Circle',
            dataLabel: {
              visible: true,
              fill: '#ffffff',
              opacity: 0.9,
              border: {
                width: 1,
                color: '#3498db'
              },
              textStyle: {
                size: '10px',
                color: '#2c3e50',
                fontFamily: 'Segoe UI',
                fontWeight: 'Normal'
              }
            }
          }}
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Complete Examples

Multiple Series with Different Markers

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';

function App() {
  const series1 = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.4, reactance: 0.25 },
    { resistance: 0.9, reactance: 0.45 }
  ];

  const series2 = [
    { resistance: 0.1, reactance: 0.1 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.1, reactance: 0.55 }
  ];

  const series3 = [
    { resistance: 0.2, reactance: 0.15 },
    { resistance: 0.6, reactance: 0.35 },
    { resistance: 1.2, reactance: 0.6 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Multiple Series Comparison' }}
      legendSettings={{ visible: true, position: 'Bottom' }}
    >
      <Inject services={[SmithchartLegend]} />
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          name="50Ω Line"
          points={series1}
          fill="#3498db"
          marker={{
            visible: true,
            width: 10,
            height: 10,
            shape: 'Circle',
            fill: '#3498db',
            border: { width: 2, color: '#2980b9' }
          }}
        />
        <SmithchartSeriesDirective
          name="75Ω Line"
          points={series2}
          fill="#e74c3c"
          marker={{
            visible: true,
            width: 10,
            height: 10,
            shape: 'Diamond',
            fill: '#e74c3c',
            border: { width: 2, color: '#c0392b' }
          }}
        />
        <SmithchartSeriesDirective
          name="100Ω Line"
          points={series3}
          fill="#2ecc71"
          marker={{
            visible: true,
            width: 10,
            height: 10,
            shape: 'Triangle',
            fill: '#2ecc71',
            border: { width: 2, color: '#27ae60' }
          }}
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Markers with Data Labels

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const transmissionData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.3, reactance: 0.2 },
    { resistance: 0.7, reactance: 0.4 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Transmission Line Analysis' }}
    >
      <SmithchartSeriesCollectionDirective>
        <SmithchartSeriesDirective
          name="Measured Data"
          points={transmissionData}
          fill="#9b59b6"
          width={2}
          marker={{
            visible: true,
            width: 12,
            height: 12,
            shape: 'Diamond',
            fill: '#9b59b6',
            opacity: 0.9,
            border: {
              width: 2,
              color: '#8e44ad'
            },
            dataLabel: {
              visible: true,
              fill: '#ffffff',
              opacity: 0.95,
              border: {
                width: 1,
                color: '#9b59b6'
              },
              textStyle: {
                size: '11px',
                color: '#2c3e50',
                fontFamily: 'Arial',
                fontWeight: 'Bold'
              }
            }
          }}
        />
      </SmithchartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

High-Visibility Configuration

For presentations or printed materials:

<SmithchartSeriesDirective
  name="Key Measurements"
  points={data}
  fill="#000000"
  theme={'Material'}
  width={3}
  marker={{
    visible: true,
    width: 14,
    height: 14,
    shape: 'Circle',
    fill: '#FFD700',
    opacity: 1,
    border: {
      width: 3,
      color: '#000000'
    },
    dataLabel: {
      visible: true,
      fill: '#ffffff',
      opacity: 1,
      border: {
        width: 2,
        color: '#000000'
      },
      textStyle: {
        size: '13px',
        color: '#000000',
        fontWeight: 'Bold'
      }
    }
  }}
/>

Subtle Markers for Dense Data

When plotting many data points:

<SmithchartSeriesDirective
  name="High-Density Data"
  points={denseData}
  marker={{
    visible: true,
    width: 6,
    height: 6,
    shape: 'Circle',
    opacity: 0.6,
    border: {
      width: 1,
      color: '#3498db'
    },
    dataLabel: {
      visible: false  // Disable labels for dense data
    }
  }}
/>

Best Practices

Marker Selection

When to use markers:

• Highlighting specific measurement points
• Distinguishing between multiple series
• Drawing attention to key data points
• Improving click/touch targeting for interactive charts

Marker size guidelines:

• Dense data (20+ points): 6-8px
• Standard data (5-15 points): 10-12px
• Sparse data (<5 points): 12-16px
• Emphasis points: 14-18px

Shape selection:

• Use different shapes for different series types
• Choose simple shapes for small markers
• Consider cultural or domain conventions (e.g., circles for measurements)

Data Label Usage

When to use data labels:

• Few data points with space for labels (<10 points)
• Exact values are critical for interpretation
• Presentation or documentation requirements
• When tooltips aren't available

When to avoid data labels:

• Dense data with many points (causes clutter)
• When interactive tooltips provide the same information
• Limited chart space
• Values are relative rather than absolute

Color and Contrast

• Ensure marker colors contrast with series line colors
• Use borders to improve marker visibility
• Test color combinations for accessibility (WCAG guidelines)
• Avoid relying solely on color to distinguish series

Performance Considerations

• Limit marker count for large datasets (consider data sampling)
• Disable data labels for datasets with >15 points per series
• Use simpler marker shapes for better rendering performance
• Consider marker opacity to reduce visual weight

Visual Hierarchy

1. Primary series: Larger markers (12-14px), high opacity, bold borders 2. Secondary series: Medium markers (10px), standard styling 3. Reference series: Smaller markers (8px), lower opacity, subtle styling

Common Patterns

Conditional Marker Visibility

Show markers only for specific conditions:

import * as React from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const [showMarkers, setShowMarkers] = React.useState(true);

  return (
    <>
      <button onClick={() => setShowMarkers(!showMarkers)}>
        Toggle Markers
      </button>
      <SmithchartComponent id="smithchart">
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective
            points={data}
            marker={{
              visible: showMarkers,
              width: 10,
              height: 10
            }}
          />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </>
  );
}

Series-Specific Styling

Different styling for different data characteristics:

<SmithchartSeriesCollectionDirective>
  {/* Measured data: prominent markers */}
  <SmithchartSeriesDirective
    name="Measured"
    points={measuredData}
    marker={{
      visible: true,
      width: 12,
      height: 12,
      shape: 'Diamond',
      fill: '#e74c3c'
    }}
  />
  
  {/* Simulated data: subtle markers */}
  <SmithchartSeriesDirective
    name="Simulated"
    points={simulatedData}
    marker={{
      visible: true,
      width: 8,
      height: 8,
      shape: 'Circle',
      opacity: 0.5,
      fill: '#95a5a6'
    }}
  />
</SmithchartSeriesCollectionDirective>

Responsive Marker Sizing

Adjust marker size based on data point count:

function getMarkerSize(dataLength: number) {
  if (dataLength > 20) return { width: 6, height: 6 };
  if (dataLength > 10) return { width: 10, height: 10 };
  return { width: 14, height: 14 };
}

const markerSize = getMarkerSize(data.length);

<SmithchartSeriesDirective
  points={data}
  marker={{
    visible: true,
    ...markerSize
  }}
/>

This comprehensive guide covers all aspects of markers and data labels in Smith Charts, enabling you to create clear, readable, and professional visualizations for transmission line and RF circuit analysis.

Print, Export, and Accessibility

Table of contents

• Printing Smith Charts
• Basic Print Implementation
• Keyboard Shortcut for Print
• Print Styling
• Exporting Smith Charts
• Supported Export Formats
• Basic Export Implementation
• Export Method Parameters
• Custom File Names
• Choosing the Right Format
• Accessibility Features
• Accessibility Standards Compliance
• Compliance Levels
• WAI-ARIA Attributes
• Keyboard Navigation
• Color Contrast
• Screen Reader Support
• Accessibility Testing Tools
• Complete Examples
• Full Print and Export Implementation
• Accessible Chart with All Features
• Best Practices
• Print Optimization
• Export Recommendations
• Accessibility Best Practices
• Mobile Accessibility
• Troubleshooting
• Print Not Working
• Export Fails
• Accessibility Issues

Printing Smith Charts

The rendered Smith Chart can be printed directly from the browser by calling the public print method. The ID of the Smith Chart's div element must be passed as an argument.

Basic Print Implementation

import * as React from "react";
import { useRef } from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const chartRef = useRef(null);

  const handlePrint = () => {
    if (chartRef.current) {
      chartRef.current.print('smithchart');
    }
  };

  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <div>
      <button onClick={handlePrint}>Print Chart</button>
      
      <SmithchartComponent
        ref={chartRef}
        id="smithchart"
        title={{ text: 'Transmission Line Analysis' }}
      >
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective points={data} />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Keyboard Shortcut for Print

The Smith Chart supports the Ctrl+P keyboard shortcut for printing, which works when the chart has focus.

Print Styling

When printing, the chart maintains its current styling and dimensions. For best print results:

<SmithchartComponent
  id="smithchart"
  width="700px"   // Standard print width
  height="525px"  // 4:3 aspect ratio
  title={{
    text: 'Impedance Analysis Report',
    font: { size: '16px', fontWeight: 'Bold', color: '#000000' }
  }}
>
  {/* series configuration */}
</SmithchartComponent>

Exporting Smith Charts

The rendered Smith Chart can be exported to various image formats using the export method. This is useful for including charts in reports, presentations, or documentation.

Supported Export Formats

• JPEG - Compressed raster image
• PNG - Lossless raster image
• SVG - Scalable vector graphics
• PDF - Portable document format

Basic Export Implementation

import * as React from "react";
import { useRef } from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const chartRef = useRef(null);

  const handleExport = (format) => {
    if (chartRef.current) {
      chartRef.current.export(format, 'smithchart');
    }
  };

  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <div>
      <div style={{ marginBottom: '10px' }}>
        <button onClick={() => handleExport('PNG')}>Export as PNG</button>
        <button onClick={() => handleExport('JPEG')}>Export as JPEG</button>
        <button onClick={() => handleExport('SVG')}>Export as SVG</button>
        <button onClick={() => handleExport('PDF')}>Export as PDF</button>
      </div>
      
      <SmithchartComponent
        ref={chartRef}
        id="smithchart"
        title={{ text: 'RF Circuit Analysis' }}
      >
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective points={data} />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Export Method Parameters

The export method takes two parameters:

1. type (string): Export format - 'PNG', 'JPEG', 'SVG', or 'PDF' 2. fileName (string): Name of the exported file (without extension)

chartRef.current.export('PNG', 'impedance-analysis');
// Creates: impedance-analysis.png

Custom File Names

Use dynamic file names based on data or user input:

import * as React from "react";
import { useRef, useState } from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
  const chartRef = useRef(null);
  const [fileName, setFileName] = useState('smithchart');

  const handleExport = () => {
    if (chartRef.current) {
      const timestamp = new Date().toISOString().slice(0, 10);
      const customName = `${fileName}-${timestamp}`;
      chartRef.current.export('PNG', customName);
    }
  };

  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <div>
      <input
        type="text"
        value={fileName}
        onChange={(e) => setFileName(e.target.value)}
        placeholder="File name"
      />
      <button onClick={handleExport}>Export as PNG</button>
      
      <SmithchartComponent
        ref={chartRef}
        id="smithchart"
        title={{ text: 'Analysis Results' }}
      >
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective points={data} />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Choosing the Right Format

PNG:

• Best for web use and general documentation
• Lossless compression, good quality
• Supports transparency
• Recommended for most use cases

JPEG:

• Smaller file size than PNG
• Lossy compression (slight quality loss)
• Best for email attachments or size-constrained scenarios
• No transparency support

SVG:

• Vector format, scales infinitely without quality loss
• Editable in vector graphics software
• Best for printing and scaling
• Larger file size

PDF:

• Standard document format
• Best for formal reports and documentation
• Easy to share and view on any device
• Self-contained single file

Accessibility Features

The Smith Chart component follows accessibility guidelines and standards, making it usable for people with disabilities.

Accessibility Standards Compliance

The Smith Chart supports:

• [ADA](https://www.ada.gov/) - Americans with Disabilities Act
• [Section 508](https://www.section508.gov/) - US Federal accessibility requirements
• [WCAG 2.2](https://www.w3.org/TR/WCAG22/) - Web Content Accessibility Guidelines
• [WAI-ARIA](https://www.w3.org/TR/wai-aria/) - Accessible Rich Internet Applications

Compliance Levels

Full = All features meet the requirement Partial = Some features meet the requirement

WAI-ARIA Attributes

The Smith Chart component uses appropriate ARIA attributes:

Roles:

• img - Identifies the chart as an image
• region - Marks distinct regions of the chart

Attributes:

• aria-label - Provides accessible names for chart elements
• aria-hidden - Hides decorative elements from screen readers

These attributes are automatically applied to the chart elements.

Keyboard Navigation

The Smith Chart supports the following keyboard shortcuts:

Color Contrast

The Smith Chart component ensures sufficient color contrast for all visual elements, meeting WCAG 2.2 color contrast requirements. This makes charts readable for users with visual impairments.

Best practices for color contrast:

<SmithchartComponent
  id="smithchart"
  title={{
    text: 'Impedance Analysis',
    font: {
      color: '#000000',  // High contrast with white background
      size: '16px',
      fontWeight: 'Bold'
    }
  }}
  horizontalAxis={{
    labelStyle: {
      color: '#333333',  // Sufficient contrast
      size: '12px'
    }
  }}
>
  <SmithchartSeriesCollectionDirective>
    <SmithchartSeriesDirective
      points={data}
      fill="#0066CC"  // WCAG AA compliant blue
      width={2}
    />
  </SmithchartSeriesCollectionDirective>
</SmithchartComponent>

Screen Reader Support

While the Smith Chart has partial screen reader support, you can enhance accessibility by:

1. Adding descriptive titles:

<SmithchartComponent
  id="smithchart"
  title={{ text: 'Transmission Line Impedance: 50 Ohms at 2.4 GHz' }}
>
  {/* series configuration */}
</SmithchartComponent>

2. Providing text alternatives:

<div>
  <SmithchartComponent id="smithchart">
    {/* series configuration */}
  </SmithchartComponent>
  
  <div className="sr-only">
    {/* Screen reader only text description */}
    Chart showing impedance measurements: Resistance values range from 0 to 1.0 ohms,
    Reactance values range from 0.05 to 0.5 ohms.
  </div>
</div>

3. Including data tables:

<div>
  <SmithchartComponent id="smithchart">
    {/* series configuration */}
  </SmithchartComponent>
  
  <details>
    <summary>View Data Table</summary>
    <table>
      <thead>
        <tr>
          <th>Point</th>
          <th>Resistance (Ω)</th>
          <th>Reactance (Ω)</th>
        </tr>
      </thead>
      <tbody>
        {data.map((point, index) => (
          <tr key={index}>
            <td>{index + 1}</td>
            <td>{point.resistance}</td>
            <td>{point.reactance}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </details>
</div>

Accessibility Testing Tools

The Smith Chart has been validated with:

• [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) - Automated accessibility testing
• [axe-core](https://www.npmjs.com/package/axe-core) - Industry-standard accessibility testing

You can view accessibility samples at: Syncfusion Accessibility Demo

Complete Examples

Full Print and Export Implementation

import * as React from "react";
import { useRef } from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';

function App() {
  const chartRef = useRef(null);

  const handlePrint = () => {
    if (chartRef.current) {
      chartRef.current.print('smithchart');
    }
  };

  const handleExport = (format) => {
    if (chartRef.current) {
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
      chartRef.current.export(format, `impedance-analysis-${timestamp}`);
    }
  };

  const transmissionData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.2, reactance: 0.15 },
    { resistance: 0.5, reactance: 0.3 },
    { resistance: 0.8, reactance: 0.4 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '15px' }}>
        <button onClick={handlePrint} style={{ marginRight: '10px' }}>
          Print Chart
        </button>
        <button onClick={() => handleExport('PNG')} style={{ marginRight: '10px' }}>
          Export PNG
        </button>
        <button onClick={() => handleExport('JPEG')} style={{ marginRight: '10px' }}>
          Export JPEG
        </button>
        <button onClick={() => handleExport('SVG')} style={{ marginRight: '10px' }}>
          Export SVG
        </button>
        <button onClick={() => handleExport('PDF')}>
          Export PDF
        </button>
      </div>

      <SmithchartComponent
        ref={chartRef}
        id="smithchart"
        width="800px"
        height="600px"
        title={{
          text: 'Transmission Line Impedance Analysis',
          font: { size: '18px', fontWeight: 'Bold' }
        }}
        legendSettings={{ visible: true, position: 'Bottom' }}
      >
        <Inject services={[SmithchartLegend]} />
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective
            name="50Ω Transmission Line"
            points={transmissionData}
            fill="#3498db"
            width={2}
            marker={{ visible: true, width: 10, height: 10 }}
          />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>
    </div>
  );
}

export default App;

Accessible Chart with All Features

import * as React from "react";
import { useRef } from "react";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';

function App() {
  const chartRef = useRef(null);

  const data = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0.3, reactance: 0.2 },
    { resistance: 0.7, reactance: 0.4 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  const handleExport = () => {
    if (chartRef.current) {
      chartRef.current.export('PNG', 'accessible-smith-chart');
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>RF Circuit S-Parameter Analysis</h1>
      
      <button onClick={handleExport} style={{ marginBottom: '15px' }}>
        Export Chart (PNG)
      </button>

      <SmithchartComponent
        ref={chartRef}
        id="smithchart"
        width="700px"
        height="600px"
        title={{
          text: 'Input Impedance at 2.4 GHz',
          font: { size: '16px', fontWeight: 'Bold', color: '#000000' }
        }}
        legendSettings={{
          visible: true,
          position: 'Bottom'
        }}
        horizontalAxis={{
          labelStyle: { color: '#333333', size: '12px' }
        }}
        radialAxis={{
          labelStyle: { color: '#333333', size: '12px' }
        }}
      >
        <Inject services={[SmithchartLegend, TooltipRender]} />
        <SmithchartSeriesCollectionDirective>
          <SmithchartSeriesDirective
            name="Measured Impedance"
            points={data}
            fill="#0066CC"
            width={2}
            marker={{
              visible: true,
              width: 10,
              height: 10
            }}
            tooltip={{ visible: true }}
          />
        </SmithchartSeriesCollectionDirective>
      </SmithchartComponent>

      {/* Accessible data table */}
      <details style={{ marginTop: '20px' }}>
        <summary>View Data Table (Accessible Format)</summary>
        <table style={{ borderCollapse: 'collapse', marginTop: '10px' }}>
          <thead>
            <tr>
              <th style={{ border: '1px solid #ddd', padding: '8px' }}>Point #</th>
              <th style={{ border: '1px solid #ddd', padding: '8px' }}>Resistance (Ω)</th>
              <th style={{ border: '1px solid #ddd', padding: '8px' }}>Reactance (Ω)</th>
            </tr>
          </thead>
          <tbody>
            {data.map((point, index) => (
              <tr key={index}>
                <td style={{ border: '1px solid #ddd', padding: '8px' }}>{index + 1}</td>
                <td style={{ border: '1px solid #ddd', padding: '8px' }}>{point.resistance}</td>
                <td style={{ border: '1px solid #ddd', padding: '8px' }}>{point.reactance}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </details>

      {/* Text description for screen readers */}
      <div style={{ marginTop: '15px', fontSize: '14px', color: '#666' }}>
        <p>
          <strong>Chart Description:</strong> This Smith Chart displays input impedance measurements
          at 2.4 GHz frequency. The data shows 4 measurement points with resistance values ranging
          from 0 to 1.0 ohms and reactance values from 0.05 to 0.5 ohms.
        </p>
      </div>
    </div>
  );
}

export default App;

Best Practices

Print Optimization

1. Use appropriate dimensions: 700×525px (4:3) or 800×600px 2. High-contrast colors: Black/dark colors for lines, clear backgrounds 3. Readable fonts: Minimum 12px for labels, 16px for titles 4. Test print preview: Always check before final print

Export Recommendations

For documentation:

• Use PNG or PDF
• High resolution (800×600px or larger)
• Include descriptive titles and legends

For presentations:

• Use PNG or SVG
• Large, readable fonts
• High-contrast colors

For web embedding:

• Use PNG or JPEG
• Optimize file size
• Consider responsive dimensions

Accessibility Best Practices

1. Always provide text alternatives for screen reader users 2. Use sufficient color contrast (WCAG AA: 4.5:1 minimum) 3. Include data tables as accessible alternatives 4. Test with keyboard navigation (Tab, Shift+Tab, Ctrl+P) 5. Add descriptive titles and subtitles 6. Test with accessibility tools (axe-core, NVDA, JAWS) 7. Avoid color-only distinctions - use shapes, patterns, or labels

Mobile Accessibility

• Ensure touch targets are at least 44×44px
• Test on actual mobile devices
• Provide alternative input methods
• Consider simplified views for small screens

Troubleshooting

Print Not Working

• Verify chart reference is correctly set
• Ensure chart ID matches the parameter passed to print()
• Check that chart is fully rendered before printing
• Test browser print settings

Export Fails

• Confirm chart reference exists and is mounted
• Verify export format is valid ('PNG', 'JPEG', 'SVG', 'PDF')
• Check browser console for errors
• Ensure file name doesn't contain invalid characters

Accessibility Issues

• Run automated tests with axe-core or accessibility-checker
• Test with actual screen readers (NVDA, JAWS, VoiceOver)
• Verify keyboard navigation works as expected
• Check color contrast ratios with online tools

This comprehensive guide covers printing, exporting, and accessibility features of Smith Charts, enabling you to create charts that are shareable, printable, and accessible to all users.