Search results

Legend

Legend is a key, that contains symbol and descriptions in Smith Chart. It provides valuable information for interpreting what the Smith Chart displays. The legends can be represented in various colors, shapes, or other identifiers based on the data. You can define that legend is used to denote the series rendered in the Smith Chart.

Position and alignment

By default, the visibility of the legend is false. To enable the legend, set Visible to true in SmithchartLegendSettings. The default position for the legend is bottom. Using the Position property, you can change the position of the legend. You can either place the legend at bottom, top, right, or left of the Smith Chart.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartLegendSettings Visible="true" Position="Top"></SmithchartLegendSettings>
    <SmithchartSeriesCollection>
        <SmithchartSeries Name="Transmission1" Points="@firstTransmissionData"></SmithchartSeries>
        <SmithchartSeries Name="Transmission2" Points="@secondTransmissionData"></SmithchartSeries>
    </SmithchartSeriesCollection>
</EjsSmithchart>

@code {
    public class SmithDataSource
    {
        public double? resistance;
        public double? reactance;
    };
    private List<SmithDataSource> firstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 },
        new SmithDataSource { resistance= 6, reactance= 4.5 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 },
        new SmithDataSource { resistance= 2, reactance= 1.2 },
        new SmithDataSource { resistance= 1, reactance= 0.8 },
        new SmithDataSource { resistance= 0, reactance= 0.2 }
    };
    private List<SmithDataSource> secondTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 20, reactance= -50 },
        new SmithDataSource { resistance= 9, reactance= -4.5 },
        new SmithDataSource { resistance= 7, reactance= -2.5 },
        new SmithDataSource { resistance= 5, reactance= -1 },
        new SmithDataSource { resistance= 2, reactance= 0.5 },
        new SmithDataSource { resistance= 1, reactance= 0.4 },
        new SmithDataSource { resistance= 0, reactance= 0.05 }
    };
}

Smith chart with legend

You can place the legend anywhere in the Smith Chart by setting Position as ‘Custom’ in the SmithchartLegendSettings tag and specifying the x and y coordinates using the X and Y properties in the SmithchartLegendLocation tag.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartLegendSettings Visible="true" Position="Custom">
        <SmithchartLegendLocation X="80" Y="100"></SmithchartLegendLocation>
    </SmithchartLegendSettings>
    <SmithchartSeriesCollection>
        <SmithchartSeries Name="Transmission1" Points='@firstTransmissionData'></SmithchartSeries>
        <SmithchartSeries Name="Transmission2" Points='@secondTransmissionData'></SmithchartSeries>
    </SmithchartSeriesCollection>
</EjsSmithchart>

@code {
    public class SmithDataSource
    {
        public double? resistance;
        public double? reactance;
    };
    private List<SmithDataSource> firstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 },
        new SmithDataSource { resistance= 6, reactance= 4.5 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 },
        new SmithDataSource { resistance= 2, reactance= 1.2 },
        new SmithDataSource { resistance= 1, reactance= 0.8 },
        new SmithDataSource { resistance= 0, reactance= 0.2 }
    };
    private List<SmithDataSource> secondTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 20, reactance= -50 },
        new SmithDataSource { resistance= 9, reactance= -4.5 },
        new SmithDataSource { resistance= 7, reactance= -2.5 },
        new SmithDataSource { resistance= 5, reactance= -1 },
        new SmithDataSource { resistance= 2, reactance= 0.5 },
        new SmithDataSource { resistance= 1, reactance= 0.4 },
        new SmithDataSource { resistance= 0, reactance= 0.05 }
    };
}

Smith chart with legend

Legend alignment

You can customize the alignment of legends. By default, legend is aligned to the center position. Using the Alignment property, you can align the legend in near and far locations of the Smith Chart.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartLegendSettings
        Visible="true"
        Position="Top"
        Alignment="@SmithchartAlignment.Near">
    </SmithchartLegendSettings>
    <SmithchartSeriesCollection>
        <SmithchartSeries Name="Transmission1" Points="@firstTransmissionData"></SmithchartSeries>
        <SmithchartSeries Name="Transmission2" Points="@secondTransmissionData"></SmithchartSeries>
    </SmithchartSeriesCollection>
</EjsSmithchart>

@code {
    public class SmithDataSource
    {
        public double? resistance;
        public double? reactance;
    };
    private List<SmithDataSource> firstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 },
        new SmithDataSource { resistance= 6, reactance= 4.5 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 },
        new SmithDataSource { resistance= 2, reactance= 1.2 },
        new SmithDataSource { resistance= 1, reactance= 0.8 },
        new SmithDataSource { resistance= 0, reactance= 0.2 }
    };
    private List<SmithDataSource> secondTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 20, reactance= -50 },
        new SmithDataSource { resistance= 9, reactance= -4.5 },
        new SmithDataSource { resistance= 7, reactance= -2.5 },
        new SmithDataSource { resistance= 5, reactance= -1 },
        new SmithDataSource { resistance= 2, reactance= 0.5 },
        new SmithDataSource { resistance= 1, reactance= 0.4 },
        new SmithDataSource { resistance= 0, reactance= 0.05 }
    };
}

Smith chart with legend alignment

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 Smith Chart. Using the Shape property in legend settings, you can change the icon shape of the legend as rectangle, triangle, and so on.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartLegendSettings
        Visible="true"
        Position="Top"
        Shape="Rectangle">
    </SmithchartLegendSettings>
    <SmithchartSeriesCollection>
        <SmithchartSeries Name="Transmission1" Points="@firstTransmissionData"></SmithchartSeries>
        <SmithchartSeries Name="Transmission2" Points="@secondTransmissionData"></SmithchartSeries>
    </SmithchartSeriesCollection>
</EjsSmithchart>

@code {
    public class SmithDataSource
    {
        public double? resistance;
        public double? reactance;
    };
    private List<SmithDataSource> firstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 },
        new SmithDataSource { resistance= 6, reactance= 4.5 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 },
        new SmithDataSource { resistance= 2, reactance= 1.2 },
        new SmithDataSource { resistance= 1, reactance= 0.8 },
        new SmithDataSource { resistance= 0, reactance= 0.2 }
    };
    private List<SmithDataSource> secondTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 20, reactance= -50 },
        new SmithDataSource { resistance= 9, reactance= -4.5 },
        new SmithDataSource { resistance= 7, reactance= -2.5 },
        new SmithDataSource { resistance= 5, reactance= -1 },
        new SmithDataSource { resistance= 2, reactance= 0.5 },
        new SmithDataSource { resistance= 1, reactance= 0.4 },
        new SmithDataSource { resistance= 0, reactance= 0.05 }
    };
}

Smith chart with custom legend shape

Legend size

By default, legend takes 20% to 25% of the height horizontally when it is placed on top or bottom position and takes 20% to 25% of the width vertically when placing on the left or right in the Smith chart. You can change the default legend size using the Width and Height properties of the SmithchartLegendSettings.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartLegendSettings Visible="true" Position="Top" Height="10" Width="300">
    </SmithchartLegendSettings>
    <SmithchartSeriesCollection>
        <SmithchartSeries Name="First Transmission" Points="@firstTransmissionData"></SmithchartSeries>
        <SmithchartSeries Name="Second Transmission" Points="@secondTransmissionData"></SmithchartSeries>
    </SmithchartSeriesCollection>
</EjsSmithchart>

@code {
    public class SmithDataSource
    {
        public double? resistance;
        public double? reactance;
    };
    private List<SmithDataSource> firstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 },
        new SmithDataSource { resistance= 6, reactance= 4.5 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 },
        new SmithDataSource { resistance= 2, reactance= 1.2 },
        new SmithDataSource { resistance= 1, reactance= 0.8 },
        new SmithDataSource { resistance= 0, reactance= 0.2 }
    };
    private List<SmithDataSource> secondTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 20, reactance= -50 },
        new SmithDataSource { resistance= 9, reactance= -4.5 },
        new SmithDataSource { resistance= 7, reactance= -2.5 },
        new SmithDataSource { resistance= 5, reactance= -1 },
        new SmithDataSource { resistance= 2, reactance= 0.5 },
        new SmithDataSource { resistance= 1, reactance= 0.4 },
        new SmithDataSource { resistance= 0, reactance= 0.05 }
    };
}

Smith chart with custom legend size

Padding

You can customize the space between two legend items and customize the space between legend shape and text as needed. For customizing the space between two legend items, use the ItemPadding property. To control space between legend shape and text, use the ShapePadding property.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartLegendSettings
        Visible="true"
        Position="Top"
        ItemPadding="40"
        ShapePadding="10">
    </SmithchartLegendSettings>
    <SmithchartSeriesCollection>
        <SmithchartSeries Name="First transmission" Points="@firstTransmissionData"></SmithchartSeries>
        <SmithchartSeries Name="Second transmission" Points="@secondTransmissionData"></SmithchartSeries>
    </SmithchartSeriesCollection>
</EjsSmithchart>

@code {
    public class SmithDataSource
    {
        public double? resistance;
        public double? reactance;
    };
    private List<SmithDataSource> firstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 },
        new SmithDataSource { resistance= 6, reactance= 4.5 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 },
        new SmithDataSource { resistance= 2, reactance= 1.2 },
        new SmithDataSource { resistance= 1, reactance= 0.8 },
        new SmithDataSource { resistance= 0, reactance= 0.2 }
    };
    private List<SmithDataSource> secondTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 20, reactance= -50 },
        new SmithDataSource { resistance= 9, reactance= -4.5 },
        new SmithDataSource { resistance= 7, reactance= -2.5 },
        new SmithDataSource { resistance= 5, reactance= -1 },
        new SmithDataSource { resistance= 2, reactance= 0.5 },
        new SmithDataSource { resistance= 1, reactance= 0.4 },
        new SmithDataSource { resistance= 0, reactance= 0.05 }
    };
}

Smith chart with legend padding

Toggle visibility

By default, series name is displayed in the legend. You can collapse the visibility of the series by clicking the legend for a particular series. You can toggle the series visibility as true or false using the ToggleVisibility property. By default it is set to true.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartLegendSettings
        Visible="true"
        Position="Top"
        ToggleVisibility="true">
    </SmithchartLegendSettings>
    <SmithchartSeriesCollection>
        <SmithchartSeries Name="First transmission" Points="@firstTransmissionData"></SmithchartSeries>
        <SmithchartSeries Name="Second transmission" Points="@secondTransmissionData"></SmithchartSeries>
    </SmithchartSeriesCollection>
</EjsSmithchart>

@code {
    public class SmithDataSource
    {
        public double? resistance;
        public double? reactance;
    };
    private List<SmithDataSource> firstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 },
        new SmithDataSource { resistance= 6, reactance= 4.5 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 },
        new SmithDataSource { resistance= 2, reactance= 1.2 },
        new SmithDataSource { resistance= 1, reactance= 0.8 },
        new SmithDataSource { resistance= 0, reactance= 0.2 }
    };
    private List<SmithDataSource> secondTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 20, reactance= -50 },
        new SmithDataSource { resistance= 9, reactance= -4.5 },
        new SmithDataSource { resistance= 7, reactance= -2.5 },
        new SmithDataSource { resistance= 5, reactance= -1 },
        new SmithDataSource { resistance= 2, reactance= 0.5 },
        new SmithDataSource { resistance= 1, reactance= 0.4 },
        new SmithDataSource { resistance= 0, reactance= 0.05 }
    };
}