Smithchart legend in Vue Smithchart component
11 Jun 202424 minutes to read
Legend is a key used in smithchart, that contains symbol and descriptions. It provides valuable information for interpreting what the smithchart is displaying and can be represented in various colors, shapes or other identifiers based on the data. In simple words, we can define that legend is used to denote the series rendered in the smithchart.
Position and Alignment
By default visibility of the legend is false. To enable the legend, kindly set visible as true in legendSettings. Default position for the legend is bottom. By using [position] property, you can change the position of the legend. You can either place the legend at bottom, top, right and left side of the smithchart. To use the legend in smithchart, you need to import and inject the SmithchartLegend from chart.
<template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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 setup>
import { provide } from "vue";
import { SmithchartComponent as EjsSmithchart, SeriesDirective as ESeries, SeriesCollectionDirective as ESeriesCollection, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
const legendSettings = {
visible: true,
position: 'Top'
};
const dataSource = [
{ 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 },
];
const name = 'Transmission1';
const reactance = 'reactance';
const resistance = 'resistance';
const 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 }];
const name2 = 'Transmission2';
provide('smithchart', [SmithchartLegend]);
</script><template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-smithchart": SmithchartComponent,
"e-seriesCollection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data: function () {
return {
legendSettings: {
visible: true,
position: 'Top'
},
dataSource: [
{ 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',
reactance: 'reactance', resistance: 'resistance',
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 }],
name2: 'Transmission2'
}
},
provide: {
smithchart: [SmithchartLegend]
}
}
</script>Custom Position
Other than these positions, you can place the legend anywhere in the smithchart. To achieve this, you have to set position as custom in legendSettings and specify the x and y coordinates using the x and y properties in the location.
<template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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 setup>
import { provide } from "vue";
import { SmithchartComponent as EjsSmithchart, SeriesDirective as ESeries, SeriesCollectionDirective as ESeriesCollection, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
const legendSettings = {
visible: true,
position: 'Custom',
location: {
x: 80,
y: 100
}
};
const dataSource = [
{ 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 },
];
const name = 'Transmission1';
const reactance = 'reactance';
const resistance = 'resistance';
const 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 }];
provide('smithchart', [SmithchartLegend]);
</script><template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-smithchart": SmithchartComponent,
"e-seriesCollection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data: function () {
return {
legendSettings: {
visible: true,
position: 'Custom',
location: {
x: 80,
y: 100
}
},
dataSource: [
{ 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',
reactance: 'reactance', resistance: 'resistance',
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 }],
name2: 'Transmission2'
}
},
provide: {
smithchart: [SmithchartLegend]
}
}
</script>Legend Alignment
Other than positioning the legend in the smithchart, you can customize its alignment also. By default, legend is aligned at center. Using the [alignment] property, you can align the legend in near and far locations of the smithchart.
<template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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 setup>
import { provide } from "vue";
import { SmithchartComponent as EjsSmithchart, SeriesDirective as ESeries, SeriesCollectionDirective as ESeriesCollection, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
const legendSettings = {
visible: true,
position: 'Top',
alignment: 'Near'
};
const dataSource = [
{ 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 },
];
const name = 'Transmission1';
const reactance = 'reactance';
const resistance = 'resistance';
const 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 }];
const name2 = 'Transmission2';
provide('smithchart', [SmithchartLegend]);
</script><template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-smithchart": SmithchartComponent,
"e-seriesCollection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data: function () {
return {
legendSettings: {
visible: true,
position: 'Top',
alignment: 'Near'
},
dataSource: [
{ 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',
reactance: 'reactance', resistance: 'resistance',
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 }],
name2: 'Transmission2'
}
},
provide: {
smithchart: [SmithchartLegend]
}
}
</script>Customization
Legend Shape
By default, legend is rendered in the circle shape and the color of the shape is as same as series color in the smithchart. Using the property [shape] in legend settings, you can change the icon shape of the legend as rectangle, triangle and so on.
<template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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 setup>
import { provide } from "vue";
import { SmithchartComponent as EjsSmithchart, SeriesDirective as ESeries, SeriesCollectionDirective as ESeriesCollection, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
const legendSettings = {
visible: true,
position: 'Top',
shape: 'Rectangle'
};
const dataSource = [
{ 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 },
];
const name = 'Transmission1';
const reactance = 'reactance';
const resistance = 'resistance';
const 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 }];
const name2 = 'Transmission2';
provide('smithchart', [SmithchartLegend]);
</script><template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-smithchart": SmithchartComponent,
"e-seriesCollection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data: function () {
return {
legendSettings: {
visible: true,
position: 'Top',
shape: 'Rectangle'
},
dataSource: [
{ 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',
reactance: 'reactance', resistance: 'resistance',
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 }],
name2: 'Transmission2'
}
},
provide: {
smithchart: [SmithchartLegend]
}
}
</script>Legend Size
By default, legend takes 20% - 25% of the chart’s height horizontally, when it is placed on top or bottom position and 20% - 25% of the width vertically, while placing on left or right position of the chart. You can change this default legend size by using the [width] and [height] property of the legendSettings.
<template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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 setup>
import { provide } from "vue";
import { SmithchartComponent as EjsSmithchart, SeriesDirective as ESeries, SeriesCollectionDirective as ESeriesCollection, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
const legendSettings = {
visible: true,
position: 'Top',
height: 100,
width: 200
};
const dataSource = [
{ 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 },
];
const name = 'Transmission1';
const reactance = 'reactance';
const resistance = 'resistance';
const 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 }];
const name2 = 'Transmission2';
provide('smithchart', [SmithchartLegend]);
</script><template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-smithchart": SmithchartComponent,
"e-seriesCollection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data: function () {
return {
legendSettings: {
visible: true,
position: 'Top',
height: 100,
width: 200
},
dataSource: [
{ 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',
reactance: 'reactance', resistance: 'resistance',
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 }],
name2: 'Transmission2'
}
},
provide: {
smithchart: [SmithchartLegend]
}
}
</script>Padding
You can customize the space between two legend items and space between legend shape and text as per your requirement. For customizing the space between two legend items, you can use [itemPadding] property. To control space between legend shape and text, you can use [shapePadding] property.
<template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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 setup>
import { provide } from "vue";
import { SmithchartComponent as EjsSmithchart, SeriesDirective as ESeries, SeriesCollectionDirective as ESeriesCollection, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
const legendSettings = {
visible: true,
position: 'Top',
itemPadding: 5,
shapePadding: 10
};
const dataSource = [
{ 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 },
];
const name = 'Transmission1';
const reactance = 'reactance';
const resistance = 'resistance';
const 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 }];
const name2 = 'Transmission2';
provide('smithchart', [SmithchartLegend]);
</script><template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-smithchart": SmithchartComponent,
"e-seriesCollection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data: function () {
return {
legendSettings: {
visible: true,
position: 'Top',
itemPadding: 5,
shapePadding: 10
},
dataSource: [
{ 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',
reactance: 'reactance', resistance: 'resistance',
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 }],
name2: 'Transmission2'
}
},
provide: {
smithchart: [SmithchartLegend]
}
}
</script>Toggle Visibility
By default series name is displayed in the legend. You can collapse the visibility of the series by clicking the legend for the particular series. You can toggle the series visibility as true or false using the [toggleVisibility] property. By default it is true.
<template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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 setup>
import { provide } from "vue";
import { SmithchartComponent as EjsSmithchart, SeriesDirective as ESeries, SeriesCollectionDirective as ESeriesCollection, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
const legendSettings = {
visible: true,
position: 'Top',
toggleVisibility: false
};
const dataSource = [
{ 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 },
];
const name = 'Transmission1';
const reactance = 'reactance';
const resistance = 'resistance';
const 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 }];
const name2 = 'Transmission2';
provide('smithchart', [SmithchartLegend]);
</script><template>
<div class="control_wrapper">
<ejs-smithchart id="smithchart" :legendSettings='legendSettings'>
<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, SmithchartLegend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-smithchart": SmithchartComponent,
"e-seriesCollection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data: function () {
return {
legendSettings: {
visible: true,
position: 'Top',
toggleVisibility: false
},
dataSource: [
{ 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',
reactance: 'reactance', resistance: 'resistance',
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 }],
name2: 'Transmission2'
}
},
provide: {
smithchart: [SmithchartLegend]
}
}
</script>