Easily show the parameters of the transmission lines in high-frequency circuit applications.
Visualize the Smith chart by adding built-in features like legends, markers, tooltips, and data labels.
Print or export the Smith chart in PDF, SVG, PNG, and JPEG formats.

Trusted by the world’s leading companies

React react smith chart

React Smith Chart Code Example

Easily get started with the React Smith Chart using a few simple lines of TSX code example as demonstrated below. Also explore our React Smith Chart Example that shows you how to render and configure the Smith Chart in React.

import * as React from "react";
import * as ReactDOM from "react-dom";
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>);
    }
}
ReactDOM.render(<App />, document.getElementById('smithchart'));

Other Supported Major Frameworks

In addition to React, built-in integration is available for these major frameworks.

Remix

Preact

Gatsby

Vue

Vite

Next.js

Angular

Other data visualization components that may help your business.

Stock Chart

Circular Gauge

Linear Gauge

Diagram

HeatMap Chart

Maps

Range Selector

Smith Chart

Sparkline Charts

TreeMap

Explore all our controls

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 now

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.

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.

Explore Case Studies

Industry

Software development

75% Cost reduction

50% Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story

Industry

Utilities (oil and gas)