Transform your applications today by downloading our free evaluation version
Overview
React Smith Chart visualizes transmission-line parameters in high-frequency circuit applications. Features include legends, markers, tooltips, and data labels.
Rendering type
Visualize both the impedance and admittance of transmission lines with Smith chart.
Title and subtitle
Add a title and subtitle to the React Smith chart control to visualize additional information about the data represented. You can customize the font and alignment of the title and subtitle.
Multiple series
Plot multiple line series for representing data.
Axis customization
The React Smith chart control supports a horizontal axis and radial axis. The horizontal axis is used for plotting resistance values of transmission lines and the radial axis is used for plotting reactance values of transmission lines.
Data labels
Data labels annotate individual data points with corresponding information. Automatic label arrangement reduces intersections when displaying large amounts of data in the Smith Chart.
Legend
A legend displays information for identifying individual series and can be positioned at the left, right, top, or bottom of the plot area. Suitable for controlling series visibility by selecting individual legend items.
Animation
Animate the series in the React Smith chart while rendering.
Tooltip
The interactive React Smith chart displays a pop-up with additional information when the mouse is hovered over a data point.
Exporting
Print or export the rendered React Smith chart to save a local copy for further use.
Export
You can export the Smith chart to a PDF document or in image formats such as SVG, PNG, and JPEG in client-side.
Print the rendered Smith chart directly from the browser.
Touch and browser support
The interactive Smith chart control also support touch interactions.
Touch support
Touch interactions support tooltips and legend-based series visibility on touch-enabled devices. Suitable for exploring chart data and controlling visible series through touch input.
Responsive
Responsive rendering adapts the visualization across different device sizes. Suitable for adjusting or hiding selected elements at specific screen sizes through event-based customization.
Cross-browser support
Rendering support is available in modern browsers including Chrome, Firefox, Opera, Microsoft Edge, and Safari.
React Smith Chart Code Example
Get started with the React Smith Chart using the TSX code example below. Also explore demo that shows how to render and configure the Smith Chart in React.
import * as React from "react";
import { createRoot } from 'react-dom/client';
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
render() {
return (<SmithchartComponent id='smithchart'>
<SmithchartSeriesCollectionDirective>
<SmithchartSeriesDirective points={[
{ resistance: 10, reactance: 25 }, { resistance: 8, reactance: 6 },
{ resistance: 6, reactance: 4.5 }, { resistance: 4.5, reactance: 2 },
{ resistance: 3.5, reactance: 1.6 }, { resistance: 2.5, reactance: 1.3 },
{ resistance: 2, reactance: 1.2 }, { resistance: 1.5, reactance: 1 },
{ resistance: 1, reactance: 0.8 }, { resistance: 0.5, reactance: 0.4 },
{ resistance: 0.3, reactance: 0.2 }, { resistance: 0, reactance: 0.15 },
]} name='Transmission1'>
</SmithchartSeriesDirective>
<SmithchartSeriesDirective points={[
{ resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },
{ resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },
{ resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },
{ resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },
{ resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },
{ resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },
{ resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },
{ resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 },
]} name='Transmission2'>
</SmithchartSeriesDirective>
</SmithchartSeriesCollectionDirective>
</SmithchartComponent>);
}
}
createRoot(document.getElementById('element')).render(<App />);Not sure how to create your first React Smith Chart? Our tutorial videos and documentation can help.
I’d love to watch it now I’d love to read it nowExplore all Syncfusion React components
Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.
- SMART COMPONENTSDATA VISUALIZATIONDROPDOWNSFILE VIEWERS & EDITORSBUTTONSINTERACTIVE CHATINPUTSNAVIGATIONNOTIFICATIONS
Standalone UI SDKs
Integrate the DataGrid, Chart, Scheduler, Gantt, Rich Text Editor, File Manager, and Diagram UI components into applications to enable rich interaction and visualization, delivering a seamless user experience.
Document Solutions
Integrate the PDF Viewer, DOCX Editor, Spreadsheet Editor, and document-processing libraries into the React applications to enable a smooth user experience.
Our Customers Love Us
Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.
Here are some of their experiences.
Here are some of their experiences.
Aweseome, enough said. really
Easy usability, solving real life problems. easy to implement. most of the cases has the operators and settings possibilities you right away need. never fails to impress
Oliver O,
Geschäftsführung Kreation/Artdirektion, Small-Business
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V,
CEO, Small-Business
See Real Success Stories
Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Read Our Customer StoriesIndustry
Software development
75% Cost reduction
50% Faster development
Industry
Utilities (oil and gas)
450+ hours saved
Streamlined processes and hours of development effort saved.
Advanced, flexible features
Empowered users through robust and versatile functionality.
Industry
Software and technology
1000+ of hours saved
Accelerated development with enterprise-ready UI components.
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
Industry
Software and technology
2 Years of delay avoided
Two years of delays prevented with proactive planning.
On-time delivery
Projects delivered on schedule using trusted controls.
Industry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
Industry
Professional services
Instant access
Quick availability of features and resources.
Reduced dependencies
Fewer dependencies for faster development.
Rated by users across the globe
Syncfusion React Resources
Learning 
Documentation
Documentation
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
