Getting Started
2 Nov 202324 minutes to read
This section explains you the steps required to create a simple Smith Chart and demonstrate the basic usage of the Smith Chart control.
To get start quickly with React Smith Chart, you can check on this video:
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-baseInstallation 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 set-up a React application in TypeScript environment, run the following command.
create-react-app quickstart --template typescript cd quickstart npm start - To set-up a React application in JavaScript environment, run the following command.
create-react-app quickstart cd quickstart npm start - 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';
function App() {
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent } from '@syncfusion/ej2-react-charts';
function App() {
return (<SmithchartComponent id="smithchart"></SmithchartComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent } from '@syncfusion/ej2-react-charts';
function App() {
return ( <SmithchartComponent id="smithchart"></SmithchartComponent> );
}
export default App;
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';
function App() {
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
function App() {
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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
function App() {
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> );
};
export default App;
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
function App() {
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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
function App() {
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> );
};
export default App;
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
function App() {
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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
function App() {
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> );
};
export default App;
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
function App() {
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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
function App() {
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> );
};
export default App;
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend } from '@syncfusion/ej2-react-charts';
function App() {
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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend} from '@syncfusion/ej2-react-charts';
function App() {
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> );
};
export default App;
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
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> );
};
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));