React
Demos
Support
Forum
Download
Search results

Getting started with React Smith Chart component

This section explains you the steps required to create a Smith Chart and demonstrate the basic usage of the Smith Chart control.

Dependencies

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

|-- @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

You can use create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app
  • To setup basic React sample use following commands.
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

npm install
  • Install Syncfusion packages using below command.
npm install @syncfusion/ej2-react-charts --save

Add Smith Chart to the Project

Now, you can start adding Smith Chart component in the application. For getting started, add the Smith Chart component in src/App.tsx file using following code.

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

class App extends React.Component {
render() {
  return ( <SmithchartComponent></SmithchartComponent> );
 }
}
export default App;
import * as React from "react";
import { SmithchartComponent } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    render() {
        return (<SmithchartComponent></SmithchartComponent>);
    }
}
export default App;

Now use the npm start command to run the application in the browser.

npm start

The below example shows basic Smithchart.

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    render() {
        return (<SmithchartComponent id="smithchart"></SmithchartComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('smithchart'));

Module Injection

Smithchart component are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature module using <Inject services={} /> method. In the current application, we are going to modify the above basic smithchart to visualize transmission lines. For this application we are going to use tooltip and legend feature of the smithchart. Please find relevant feature module name and description as follows.

  • SmithchartLegend - Inject this provider to use legend feature.
  • TooltipRender - Inject this provider to use tooltip feature.

Now import the above mentioned modules from smithchart package and inject it into the Smithchart component using <Inject services={} /> method.

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

class App extends React.Component {
render() {
  return ( <SmithchartComponent>
  <Inject services={[SmithchartLegend, TooltipRender]} />
  </SmithchartComponent> );
 }
}
export default App;
import * as React from "react";
import { SmithchartComponent } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    render() {
        return (<SmithchartComponent>
  <Inject services={[SmithchartLegend, TooltipRender]}/>
  </SmithchartComponent>);
    }
}
export default App;

Add Series to Smithchart

Smithchart had two type of specification for adding series.

  • dataSource - Using this, Data object can bind directly by specifying the resistance and reactance values, series add to smithchart.
  • points - Using this, collection of resistance and reactance values can bind directly to render series.

Below sample demonstrate adding two series to smithchart both ways.

  • First series Transmission1 shows dataSource bound series.
  • Second series Transmission2 shows points bound series.
Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
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'));

Add title to SmithChart

smithchart title API used to add title for smithchart. In that text API used to set text of the title. API visible used to toggle the title.

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
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' title={{
            visible: true,
            text: 'Transmission lines applied for both impedance and admittance'
        }}>
                        <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'));

Enable Marker to Smithchart

To use series marker and it’s customization in smithchart, use series marker. To display marker for particular series, need to specify marker visible as true. Below sample marker enabled for first series only.

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
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' title={{
            visible: true,
            text: 'Transmission lines applied for both impedance and admittance'
        }}>
                        <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' marker={{ shape: 'Circle', visible: true, border: { width: 2 } }}>
                            </SmithchartSeriesDirective>
                        </SmithchartSeriesCollectionDirective>
            </SmithchartComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('smithchart'));

Enable DataLabel to Smithchart Marker

To use marker dataLabel and it’s customization in smithchart, use marker dataLabel. To display dataLabel for particular series marker, need to specify dataLabel visible as true in that series marker. Below sample dataLabel enabled for first series.

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
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' title={{
            visible: true,
            text: 'Transmission lines applied for both impedance and admittance'
        }}>
                        <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' marker={{ shape: 'Circle', dataLabel: { visible: true }, visible: true, border: { width: 2 } }}>
                            </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'));

Enable Legend for Smithchart

Smithchart had a legend feature, which is used to denote the correspond series. To enable the legend, need to inject SmithchartLegend module using Smithchart.Inject(SmithchartLegend) method and smithchart legendSettings visible as true. Following example sample shows enabling legend for smithchart. Series name can customize using series name.

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    render() {
        return (<SmithchartComponent id='smithchart' legendSettings={{ visible: true, shape: 'Circle' }} title={{
            visible: true,
            text: 'Transmission lines applied for both impedance and admittance'
        }}>
                        <Inject services={[SmithchartLegend]}/>
                        <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' marker={{ shape: 'Circle', dataLabel: { visible: true }, visible: true, border: { width: 2 } }}>
                            </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'));

Enable Tooltip for Smithchart Series

Smithchart had a tooltip feature, which is used to show the current point’s values. To enable the tooltip, need to inject TooltipRender module using Smithchart.Inject(TooltipRender) method and smithchart series tooltip visible as true. Following example sample shows enabling tooltip for smithchart series collection.

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    render() {
        return (<SmithchartComponent id='smithchart' legendSettings={{ visible: true, shape: 'Circle' }} title={{
            visible: true,
            text: 'Transmission lines applied for both impedance and admittance'
        }}>
                        <Inject services={[SmithchartLegend, TooltipRender]}/>
                        <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' tooltip={{ visible: true }} marker={{ shape: 'Circle', dataLabel: { visible: true }, visible: true, border: { width: 2 } }}>
                            </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' tooltip={{ visible: true }}>
                            </SmithchartSeriesDirective>
                        </SmithchartSeriesCollectionDirective>
            </SmithchartComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('smithchart'));
Previous
Next