Smith chart series in EJ2 TypeScript Smithchart control

26 Apr 20239 minutes to read

You can add any number of series to the smithchart as per your requirement. You can use series setting to either add or customize the data. For the points or datasource added in the series, line is drawn. You can customize the each series as per your requirement with marker, datalabel, animation, opacity and so on.

points or datasource

For adding values in the smithchart, you can use either points or datasource in the series. Points and datasource both should be array of object which should contain the field names resistance and rectangle.

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

let smithchart: Smithchart = new Smithchart({
    series: [
        {
            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 },
            ]
        }
    ],
});

smithchart.appendTo('#container');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for Smith chart </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Smithchart UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-charts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script>
</body>

</html>

Series customization

Using following options in series settings, you can customize each series in smithchart as per your requirement.

  • [fill] - Used to customize the fill color for the series.
  • [enableSmartLabels] - Used to place the data labels on the smithchart without overlapping with each other.
  • [visibility] - Used to handle the visibility of the series.
  • [opacity] - Used to control the opacity of the series line.
  • [width] - Used to customize the width of the series line.
import { Smithchart } from '@syncfusion/ej2-charts';

let smithchart: Smithchart = new Smithchart({
    series: [
        {
            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',
            fill: '#009933',
            visibility: 'visible',
            opacity: 0.75,
            width: 2.5,
            marker: {
                dataLabel: {
                    visible: true
                }
            }
        }
    ],
});

smithchart.appendTo('#container');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for Smith chart </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Smithchart UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-charts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script>
</body>

</html>