Search results

Getting Started with JavaScript(ES5)

The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.

Control Initialization

The Essential JS 2 JavaScript controls can be initialized by using either of the following ways.

  • Using local script and style references in a HTML page.
  • Using CDN link for script and style reference.

Using local script and style references in a HTML page

Step 1: Create an app folder quickstart for getting started.

Step 2: You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.

Syntax:

Dependency Script: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js

Control Script: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js

Dependency Styles: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\material.css

Control Styles: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\material.css

Example:

Dependency Script: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\dist\global\ej2-base.min.js

Control Script: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-charts\dist\global\ej2-charts.min.js

Dependency Styles: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\styles\material.css

Control Styles: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-charts\styles\material.css

The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file.

Scripts: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js

Styles: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\material.css

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific controls. This web tool is useful to combine the required control scripts and styles in a single file.

Step 3: Create a folder ~/quickstart/resources and copy/paste the global scripts and styles from the above installed location to ~/quickstart/resources/package corresponding package location.

Step 4: Create a HTML page (index.html) in ~/quickstart/index.html and add the Essentials JS 2 script and style references.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Essential JS 2</title>
        <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
        <link href="resources/base/material.css" rel="stylesheet" type="text/css"/>
        <!-- Essential JS 2 smithchart's material theme (Control Styles) -->
        <link href="resources/charts/material.css" rel="stylesheet" type="text/css"/>

        <!-- Essential JS 2 Base's global script (Dependency Script) -->
        <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
        <!-- Essential JS 2 smithchart's global script (Control Script) -->
        <script src="resources/charts/ej2-charts.min.js" type="text/javascript"></script>
    </head>
    <body>
    </body>
</html>

Step 5: Now, add the Smithchart element and initiate the Syncfusion JavaScript (ES5) Smithchart control in the ~/quickstart/index.html by using following code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Essential JS 2</title>
        <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
        <link href="resources/base/material.css" rel="stylesheet" type="text/css"/>
        <!-- Essential JS 2 smithchart's material theme (Control Styles) -->
        <link href="resources/charts/material.css" rel="stylesheet" type="text/css"/>

        <!-- Essential JS 2 Base's global script (Dependency Script) -->
        <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
        <!-- Essential JS 2 smithchart's global script (Control Script) -->
        <script src="resources/charts/ej2-charts.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- Add the HTML <smithchart> element  -->
        <smithchart id="element">Smithchart</smithchart>
        <script>
            // initialize smithchart control
            var smithchart = new ej.charts.Smithchart();
            // Render initialized smithchart.
            smithchart.appendTo('#element');
        </script>
    </body>
</html>

Step 6: Now, run the index.html in web browser, it will render the Syncfusion JavaScript Smithchart control.

Step 1: Create an app folder quickstart for getting started.

Step 2: The Essential JS 2 controls’s global scripts and styles are already hosted in the below CDN link formats.

Syntax:

Dependency Script: https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Control Script: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Dependency Styles: https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/material.css

Control Styles: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css

Example:

Script: https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js

Styles: https://cdn.syncfusion.com/ej2/ej2-charts/styles/material.css

Step 3: Create a HTML page (index.html) in ~/quickstart/index.html location and add the CDN link references. Now, add the Smithchart element and initiate the Syncfusion JavaScript (ES5) Smithchart control in the index.html by using following code.

Source
Preview
index.html
<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>

            <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 smithchart's material theme (Control Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 Base's global script (Dependency Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 smithchart's global script (Control Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>

       </head>
       <body>
           <!-- Add the HTML <smithchart> element  -->
            <smithchart id="element">SmithChart</smithchart>
            <script>
                ej.base.enableRipple(true);
                // initialize smithchart control
                var smithchart = new ej.charts.Smithchart();
                // Render initialized smithchart.
                smithchart.appendTo('#element');
            </script>
       </body>
  </html>

Step 4: Now, run the index.html in web browser, it will render the Syncfusion JavaScript Smithchart control.

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
<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>

            <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 smithchart's material theme (Control Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 Base's global script (Dependency Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 smithchart's global script (Control Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>

       </head>
       <body>
           <!-- Add the HTML <smithchart> element  -->
            <smithchart id="element">SmithChart</smithchart>
            <script>
                ej.base.enableRipple(true);
                // initialize smithchart control
                var smithchart = new ej.charts.Smithchart({
                    series: [
                        {
                            dataSource: [
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
                            ],
                            name: 'Transmission1',
                            reactance: 'reactance', resistance: 'resistance'
                        },
                        {
                            points: [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
                            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
                            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
                            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }],
                            name: 'Transmission2'
                        }
                    ]
                });
                // Render initialized smithchart.
                smithchart.appendTo('#element');
            </script>
       </body>
  </html>

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
<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>

            <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 smithchart's material theme (Control Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 Base's global script (Dependency Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 smithchart's global script (Control Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>

       </head>
       <body>
           <!-- Add the HTML <smithchart> element  -->
            <smithchart id="element">SmithChart</smithchart>
            <script>
                ej.base.enableRipple(true);
                // initialize smithchart control
                var smithchart = new ej.charts.Smithchart({
                    title: { text: 'Transmission lines applied for both impedance and admittance'},
                    series: [
                        {
                            dataSource: [
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
                            ],
                            name: 'Transmission1',
                            reactance: 'reactance', resistance: 'resistance'
                        },
                        {
                            points: [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
                            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
                            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
                            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }],
                            name: 'Transmission2'
                        }
                    ]
                });
                // Render initialized smithchart.
                smithchart.appendTo('#element');
            </script>
       </body>
  </html>

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
<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>

            <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 smithchart's material theme (Control Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 Base's global script (Dependency Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 smithchart's global script (Control Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>

       </head>
       <body>
           <!-- Add the HTML <smithchart> element  -->
            <smithchart id="element">SmithChart</smithchart>
            <script>
                ej.base.enableRipple(true);
                // initialize smithchart control
                var smithchart = new ej.charts.Smithchart({
                    title: { text: 'Transmission lines applied for both impedance and admittance'},
                    series: [
                        {
                            dataSource: [
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
                            ],
                            name: 'Transmission1',
                            reactance: 'reactance', resistance: 'resistance',
                            marker: {
                                visible: true
                            }
                        },
                        {
                            points: [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
                            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
                            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
                            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }],
                            name: 'Transmission2'
                        }
                    ]
                });
                // Render initialized smithchart.
                smithchart.appendTo('#element');
            </script>
       </body>
  </html>

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
<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>

            <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 smithchart's material theme (Control Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 Base's global script (Dependency Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 smithchart's global script (Control Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>

       </head>
       <body>
           <!-- Add the HTML <smithchart> element  -->
            <smithchart id="element">SmithChart</smithchart>
            <script>
                ej.base.enableRipple(true);
                // initialize smithchart control
                var smithchart = new ej.charts.Smithchart({
                    title: { text: 'Transmission lines applied for both impedance and admittance'},
                    series: [
                        {
                            dataSource: [
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
                            ],
                            name: 'Transmission1',
                            reactance: 'reactance', resistance: 'resistance',
                            marker: {
                                visible: true
                            }
                        },
                        {
                            points: [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
                            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
                            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
                            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }],
                            name: 'Transmission2'
                        }
                    ]
                });
                // Render initialized smithchart.
                smithchart.appendTo('#element');
            </script>
       </body>
  </html>

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
<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>

            <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 smithchart's material theme (Control Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 Base's global script (Dependency Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 smithchart's global script (Control Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>

       </head>
       <body>
           <!-- Add the HTML <smithchart> element  -->
            <smithchart id="element">SmithChart</smithchart>
            <script>
                ej.base.enableRipple(true);
                // initialize smithchart control
                var smithchart = new ej.charts.Smithchart({
                    title: { text: 'Transmission lines applied for both impedance and admittance'},
                    legendSettings: {
                        visible: true
                    },
                    series: [
                        {
                            dataSource: [
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
                            ],
                            name: 'Transmission1',
                            reactance: 'reactance', resistance: 'resistance',
                            marker: {
                                visible: true,
                                dataLabel: {
                                    visible: true
                                }
                            }
                        },
                        {
                            points: [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
                            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
                            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
                            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }],
                            name: 'Transmission2'
                        }
                    ]
                });
                // Render initialized smithchart.
                smithchart.appendTo('#element');
            </script>
       </body>
  </html>

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
<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>

            <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 smithchart's material theme (Control Styles) -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 Base's global script (Dependency Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 smithchart's global script (Control Script) -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>

       </head>
       <body>
           <!-- Add the HTML <smithchart> element  -->
            <smithchart id="element">SmithChart</smithchart>
            <script>
                ej.base.enableRipple(true);
                // initialize smithchart control
                var smithchart = new ej.charts.Smithchart({
                    title: { text: 'Transmission lines applied for both impedance and admittance'},
                    legendSettings: {
                        visible: true
                    },
                    series: [
                        {
                            dataSource: [
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
                            ],
                            name: 'Transmission1',
                            reactance: 'reactance', resistance: 'resistance',
                            tooltip: {
                                visible: true
                            },
                            marker: {
                                visible: true,
                                dataLabel: {
                                    visible: true
                                }
                            }
                        },
                        {
                            points: [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
                            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
                            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
                            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
                            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
                            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }],
                            name: 'Transmission2',
                            tooltip: {
                                visible: true
                            }
                        }
                    ]
                });
                // Render initialized smithchart.
                smithchart.appendTo('#element');
            </script>
       </body>
  </html>