Getting Started with the Vue Smithchart Component in Vue 2

26 Sep 202324 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion Vue Smithchart component

Prerequisites

System requirements for Syncfusion Vue UI components

Dependencies

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

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

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

or

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Once the quickstart project is set up with default settings, proceed to add Syncfusion components to the project.

Add Syncfusion Vue packages

Syncfusion packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue Smithchart component as an example. Install the @syncfusion/ej2-vue-charts package by running the following command:

npm install @syncfusion/ej2-vue-charts --save

or

yarn add @syncfusion/ej2-vue-charts

Add Syncfusion Vue component

Follow the below steps to add the Vue Smithchart component:

1. First, import and register the Smithchart component in the script section of the src/App.vue file.

~src/App.vue

<script>
import { SmithchartComponent } from "@syncfusion/ej2-vue-charts";
export default {
  components: {
    'ejs-smithchart': SmithchartComponent
  }
}
</script>

2. In the template section, define the Smithchart component.

~src/App.vue

<template>
    <div id="app">
    <ejs-smithchart></ejs-smithchart>
  </div>
</template>

Run the project

To run the project, use the following command:

npm run serve

or

yarn run serve

The following example shows a basic Smith chart.

<template>
<ejs-smithchart id="smithchart"></ejs-smithchart>
</template>

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


export default {
  components: {
    'ejs-smithchart': SmithchartComponent
  }
}
</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.

<template>
    <div class="control_wrapper">
        <ejs-smithchart id="smithchart"></ejs-smithchart>
    </div>
</template>
<script>
import { SmithchartComponent, SmithchartLegend, TooltipRender } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-smithchart': SmithchartComponent
  },
  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.

~/src/App.vue

<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 { SmithchartComponent, SeriesDirective, SeriesCollectionDirective } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-smithchart': SmithchartComponent,
    'e-series': SeriesDirective,
    'e-seriesCollection': SeriesCollectionDirective
  },
  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.

~/src/App.vue

<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 { SmithchartComponent, SeriesDirective, SeriesCollectionDirective } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-smithchart': SmithchartComponent,
    'e-series': SeriesDirective,
    'e-seriesCollection': SeriesCollectionDirective
  },
  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.

~/src/App.vue

<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 { SmithchartComponent, SeriesDirective, SeriesCollectionDirective } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-smithchart': SmithchartComponent,
    'e-series': SeriesDirective,
    'e-seriesCollection': SeriesCollectionDirective
  },
  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.

~/src/App.vue

<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 { SmithchartComponent, SeriesDirective, SeriesCollectionDirective } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-smithchart': SmithchartComponent,
    'e-series': SeriesDirective,
    'e-seriesCollection': SeriesCollectionDirective
  },
  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.

~/src/App.vue

<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 { SmithchartComponent, SeriesDirective, SeriesCollectionDirective, SmithchartLegend } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-smithchart': SmithchartComponent,
    'e-series': SeriesDirective,
    'e-seriesCollection': SeriesCollectionDirective
  },
  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.

~/src/App.vue

<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 { SmithchartComponent, SeriesDirective, SeriesCollectionDirective, SmithchartLegend,TooltipRender } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-smithchart': SmithchartComponent,
    'e-series': SeriesDirective,
    'e-seriesCollection': SeriesCollectionDirective
  },
  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>