Search results

Axis

Like chart, Smith Chart also supports for the following two types of axis:

  • Horizontal axis - Axis drawn as straight line in the horizontal direction of the Smith Chart.
  • Radial axis - Axis is drawn as circular path.

Labels customization

Axis labels are used to denote the data bound to the Smith Chart. Using axis labels, you can easily identify the interval in which the chart is rendered. The following properties are used to customize the axis labels for horizontal and radial axes:

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithChartHorizontalAxis>
        <SmithChartHorizontalAxisLabelStyle
            FontFamily="Times New Roman"
            FontWeight="bold"
            FontStyle="Italic"
            Opacity="0.75"
            Size="14px">
        </SmithChartHorizontalAxisLabelStyle>
    </SmithChartHorizontalAxis>
    <SmithChartRadialAxis
        LabelPosition="AxisLabelPosition.Inside"
        LabelIntersectAction="SmithchartLabelIntersectAction.None">
        <SmithChartRadialAxisLabelStyle
            FontFamily="Times New Roman"
            FontWeight="bold"
            FontStyle="Italic"
            Opacity="0.75"
            Size="14px">
        </SmithChartRadialAxisLabelStyle>
    </SmithChartRadialAxis>
    <SmithchartSeriesCollection>
        <SmithchartSeries Points="@firstTransmissionData"></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 }
    };
}

Smith chart axis label customization

Gridline

To make the data in a chart that displays axes easier to read, display horizontal and radial axis gridlines. Gridlines extend from any horizontal and radial axes across the plot area of the Smith Chart. Both horizontal and radial axes support to major and minor gridlines. Major gridlines are drawn from the position in which the labels are rendered, and the minor gridlines are drawn between two major gridlines as per the count set in settings.

The following things in major and minor gridlines can be customized:

  • Width - Customizes the width of gridlines.
  • DashArray - Determines whether the gridlines have to be rendered as normal lines or dashed lines.
  • Visible - Enables or disables the visibility of the gridlines.
  • Opacity - Customizes the opacity of the major gridlines.
  • Count - Customizes the count of the minor gridlines.
@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithChartHorizontalAxis>
        <SmithchartHorizontalMajorGridLines
            Visible="true"
            Opacity="0.8"
            Width="10">
        </SmithchartHorizontalMajorGridLines>
        <SmithchartHorizontalMinorGridLines
            Visible="true"
            DashArray="5"
            Count="10">
        </SmithchartHorizontalMinorGridLines>
    </SmithChartHorizontalAxis>
    <SmithchartSeriesCollection>
        <SmithchartSeries Points="@firstTransmissionData"></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 }
    };
}

Smith chart grid line customization

Axisline

It is a line in Smith Chart that can be configured to denote the axis. By default, visibility of the axis line is true. You can customize its visibility using the Visible property in axis line. You can also customize the following properties of the axis line.

  • Width -Customizes the width of the axis line.
  • DashArray -Renders the axis line as dashed line.
  • Visible - Enables or disables the visibility of the axis line.
@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithChartHorizontalAxis>
        <SmithchartHorizontalAxisLine Width="2" Visible="true" DashArray="5" Color="blue"></SmithchartHorizontalAxisLine>
    </SmithChartHorizontalAxis>
    <SmithchartSeriesCollection>
        <SmithchartSeries Points="@firstTransmissionData"></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 }
    };
}

Smith chart with axis line customization