Vue
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Getting started with Vue Smith Chart component

17 Mar 2023 / 15 minutes to read

This section explains you the steps required to create the Smith chart control and demonstrate its basic usage.

Prerequisites

System requirements for Syncfusion Vue UI components

Dependencies

The following list of minimum dependencies are required to use the Smith chart:

Copied to clipboard
|-- @syncfusion/ej2-vue-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-vue-base

Installation and configuration

You can use Vue CLI to setup your vue applications. To install Vue CLI use the following command.

Copied to clipboard
npm install -g @vue/cli

npm install -g @vue/cli-init

Start a new project using below Vue CLI command.

Copied to clipboard
vue init webpack-simple quickstart

cd quickstart

npm install

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com registry. You can choose the component that you want to install. For this application, we are going to use Smith chart component.

To install Smith chart component, use the following command

Copied to clipboard
npm install @syncfusion/ej2-vue-charts –save

Registering Vue Component

For Registering Vue Component two ways are available. They are as follows.

  • Vue.use()
  • Vue.component()

Using Vue.use()

Import the Component Plugin from the EJ2 Vue Package and register the same using Vue.use() with Component Plugin as its argument.

Refer the code snippet given below.

Copied to clipboard
import { SmithchartPlugin } from '@syncfusion/ej2-vue-charts';

Vue.use(SmithchartPlugin);

By Registering Component Plugin in Vue, all child directives are also globally registered.

Using Vue.component()

Import the Component and Component Plugin from EJ2 Vue Package, register the same using the Vue.component() with name of Component from ComponentPlugin and the EJ2 Vue Component as its arguments.

Refer the code snippet given below.

Copied to clipboard
import { SmithchartComponent, SmithchartPlugin } from '@syncfusion/ej2-vue-charts';

Vue.component(SmithchartPlugin.name,  SmithchartComponent);

Note: By using Vue.component(), only the EJ2 Vue Component is registered. Child directives needs to be registered separately.

Initialize Smith chart component

Add the EJ2 Vue Smith chart using <ejs-smithchart> to the <template> section of the App.vue file in src directory, the content attribute of the Smith chart component is provided as name in data option in the <script> section.

Copied to clipboard
<template>
<div id="app">
<ejs-smithchart></ejs-smithchart>
  </div>
</template>
<script>
import Vue from 'vue';
import { SmithchartPlugin } from '@syncfusion/ej2-vue-charts';

Vue.use(SmithchartPlugin);
export default Vue.extend ({});
</script>

Run the application

Now run the npm run dev command in the console, it will build your application and open in the browser.

The following example shows a basic Smith chart.

Copied to clipboard
<template>
<ejs-smithchart id="smithchart"></ejs-smithchart>
</template>

<script>
import Vue from 'vue';
import { SmithchartPlugin } from '@syncfusion/ej2-vue-charts';

Vue.use(SmithchartPlugin);

export default Vue.extend ({});
</script>

Module Injection

The smith chart component is segregated into individual feature-wise modules. To use a particular feature, inject its feature module using the provide option on component creation. The module available in smith chart and its descriptions is as follows.

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

In the current application, the above basic Smith chart is modified to visualize transmission lines. For this application, the tooltip and legend features of the Smith chart are used. The feature modules available in the Smith chart and their descriptions are as follows.

Now, import the above mentioned modules from the Smithchart package, and inject it into the Smith chart control using the provide option.

Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-smithchart id="smithchart"></ejs-smithchart>
</div>
</template>
<script>
import Vue from 'vue';
import { SmithchartPlugin,SmithchartLegend, TooltipRender } from "@syncfusion/ej2-vue-charts";
Vue.use(SmithchartPlugin);

export default {
  data: function() {
return {
}
  },
provide:{
smithchart:[Legend, TooltipRender]
}
}
</script>

Add series to Smith chart

The Smith chart has the following two type of specification for adding series:

  • dataSource - Data object can be bound directly by specifying the resistance and reactance values.
  • points - Collection of resistance and reactance values can be bound directly to render the series.

The following two ways demonstrate adding two series to the Smith chart.

  • First series Transmission1 shows dataSource bound series.
  • Second series Transmission2 shows points bound series.
Source
Preview
app.vue
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-smithchart id="smithchart">
            <e-seriesCollection>
                <e-series :dataSource='dataSource' :name='name' :reactance='reactance' :resistance='resistance'></e-series>
                <e-series :points='points' :name='name2'></e-series>
            </e-seriesCollection>
    </ejs-smithchart>
</div>
</template>
<script>
import Vue from 'vue';
import { SmithchartPlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(SmithchartPlugin);

export default {
  data: function() {
return {
  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 }],
        name2: 'Transmission2'
}
  }
}
</script>

Add title to Smith chart

The following APIs are used in the Smith chart:

  • title - Adds title to the Smith chart.
  • text - Sets text to the title.
  • visible - Toggles the title.
Source
Preview
app.vue
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-smithchart id="smithchart" :title='title'>
            <e-seriesCollection>
                <e-series :dataSource='dataSource' :name='name' :reactance='reactance' :resistance='resistance'></e-series>
                <e-series :points='points' :name='name2'></e-series>
            </e-seriesCollection>
    </ejs-smithchart>
</div>
</template>
<script>
import Vue from 'vue';
import { SmithchartPlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(SmithchartPlugin);

export default {
  data: function() {
return {
  title: { text: 'Transmission lines applied for both impedance and admittance'},
  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 }],
        name2: 'Transmission2'
}
  }
}
</script>

Enable marker to the Smith chart

To use marker in series and its customization in Smith chart, use series marker API. To display marker for a particular series, specify the marker visible to true. The following sample marker is enabled for the first series only.

Source
Preview
app.vue
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-smithchart id="smithchart">
            <e-seriesCollection>
                <e-series :title='title' :dataSource='dataSource' :name='name' :reactance='reactance' :resistance='resistance' :marker='marker'></e-series>
                <e-series :points='points' :name='name2'></e-series>
            </e-seriesCollection>
    </ejs-smithchart>
</div>
</template>
<script>
import Vue from 'vue';
import { SmithchartPlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(SmithchartPlugin);

export default {
  data: function() {
return {
    title: { text: 'Transmission lines applied for both impedance and admittance'},
    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 }],
        name2: 'Transmission2'
}
  }
}
</script>

Enable data label to marker

To use marker data label and its customization in Smith chart, use marker dataLabel. To display data label for a particular series marker, specify the dataLabel visible to true in that series marker. The following sample data label is enabled for the first series.

Source
Preview
app.vue
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-smithchart id="smithchart">
            <e-seriesCollection>
                <e-series :title='title' :dataSource='dataSource' :name='name' :reactance='reactance' :resistance='resistance' :marker='marker'></e-series>
                <e-series :points='points' :name='name2'></e-series>
            </e-seriesCollection>
    </ejs-smithchart>
</div>
</template>
<script>
import Vue from 'vue';
import { SmithchartPlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(SmithchartPlugin);

export default {
  data: function() {
return {
    title: { text: 'Transmission lines applied for both impedance and admittance'},
    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 }],
    name2: 'Transmission2'
    }
  }
}
</script>

Enable legend for Smith chart

The legend feature is used to denote the corresponding series. To enable the legend, inject the SmithchartLegend module using the provide option and set visible to true in legendSettings. The following sample shows enabling legend for Smith chart. The series name can be customized using the series name.

Source
Preview
app.vue
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
            <e-seriesCollection>
                <e-series :title='title' :dataSource='dataSource' :name='name' :reactance='reactance' :resistance='resistance' marker='marker'></e-series>
                <e-series :points='points' :name='name2'></e-series>
            </e-seriesCollection>
    </ejs-smithchart>
</div>
</template>
<script>
import Vue from 'vue';
import { SmithchartPlugin,SmithchartLegend } from "@syncfusion/ej2-vue-charts";
Vue.use(SmithchartPlugin);

export default {
  data: function() {
return {
    title: { text: 'Transmission lines applied for both impedance and admittance'},
    legendSettings: {
    visible: true
        },
    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 }],
    name2: 'Transmission2'
}
  },
provide:{
smithchart:[SmithchartLegend]
}
}
</script>

Enable tooltip for the Smith chart series

The tooltip feature is used to show the values of the current point. To enable the tooltip, inject the TooltipRender module using the provide option and set visible to true. The following sample shows enabling tooltip for Smith chart series collection.

Source
Preview
app.vue
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
            <e-seriesCollection>
                <e-series :title='title' :dataSource='dataSource' :tooltip='tooltip' :name='name' :reactance='reactance' :resistance='resistance' marker='marker'></e-series>
                <e-series :points='points' :name='name2' :tooltip='tooltip2'></e-series>
            </e-seriesCollection>
    </ejs-smithchart>
</div>
</template>
<script>
import Vue from 'vue';
import { SmithchartPlugin,SmithchartLegend,TooltipRender } from "@syncfusion/ej2-vue-charts";
Vue.use(SmithchartPlugin);

export default {
  data: function() {
return {
        title: { text: 'Transmission lines applied for both impedance and admittance'},
        legendSettings: {
            visible: true
        },
        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 }],
        name2: 'Transmission2',
        tooltip2: {
            visible: true
        }
}
  },
provide:{
smithchart:[SmithchartLegend,TooltipRender]
}
}
</script>
Previous
Next