Axes in WPF Smith Chart (SfSmithChart)

7 May 202114 minutes to read

Typically, SmithChart has been used two axes that are used to measure and categorize the data.

  1. Horizontal Axis (Resistance)
  2. Radial Axis (Reactance)

Horizontal Axis

Horizontal axis scale is used to measure normalized resistance value.

The following topics explain in detail about the axis and its parts.

MajorGridlines

By default, major gridlines are automatically added to the Axis. SfSmithChart supports the customization of major gridline. The visibility of the major gridlines can be controlled by using the ShowMajorGridlines property.

<syncfusion:SfSmithChart>
     <syncfusion:SfSmithChart.HorizontalAxis>
         <syncfusion:HorizontalAxis ShowMajorGridlines="False">
         </syncfusion:HorizontalAxis>
     </syncfusion:SfSmithChart.HorizontalAxis>
 </syncfusion:SfSmithChart>
//Customizing horizontal(Resistance) axis to the chart
chart.HorizontalAxis = new HorizontalAxis();
chart.HorizontalAxis.ShowMajorGridlines = false;

Axes_img1

MajorGridlineStyle

SfSmithChart provides support to customize the style of the major gridlines by defining the MajorGridlineStyle property as shown in the below code snippet.

<syncfusion:SfSmithChart x:Name="SmithChart">
    <syncfusion:SfSmithChart.Resources>
        <Style TargetType="Path" x:Key="lineStyle">
            <Setter Property="Stroke" Value="BurlyWood"></Setter>
            <Setter Property="StrokeDashArray" Value="5,3"></Setter>
        </Style>
    </syncfusion:SfSmithChart.Resources>
        <syncfusion:SfSmithChart.HorizontalAxis>
        <syncfusion:HorizontalAxis MajorGridlineStyle="{StaticResource lineStyle}">
        </syncfusion:HorizontalAxis>
   </syncfusion:SfSmithChart.HorizontalAxis>
</syncfusion:SfSmithChart>
chart.HorizontalAxis.MajorGridlineStyle = this.Grid1.Resources["lineStyle"] as Style;

Axes_img2

MinorGridlines

By default, minor gridlines are not added to the Axis. The visibility of the minor gridlines can be controlled by using the ShowMinorGridlines property.

<syncfusion:SfSmithChart>
     <syncfusion:SfSmithChart.HorizontalAxis>
         <syncfusion:HorizontalAxis ShowMinorGridlines="True">
         </syncfusion:HorizontalAxis>
     </syncfusion:SfSmithChart.HorizontalAxis>
 </syncfusion:SfSmithChart>
//Customizing horizontal(Resistance) axis to the chart 
chart.HorizontalAxis = new HorizontalAxis();
chart.HorizontalAxis.ShowMinorGridlines = true;

Axes_img3

MinorGridlinesCount

Minor gridlines can be added by defining MinorGridlinesCount property. By default, this value is eight. It means, every 100 pixels it renders maximum eight minor gridlines.

<syncfusion:SfSmithChart>
     <syncfusion:SfSmithChart.HorizontalAxis>
         <syncfusion:HorizontalAxis ShowMinorGridlines="True" MinorGridlinesCount="12">
         </syncfusion:HorizontalAxis>
     </syncfusion:SfSmithChart.HorizontalAxis>
 </syncfusion:SfSmithChart>
//Customizing horizontal(Resistance) axis to the chart 
chart.HorizontalAxis = new HorizontalAxis();
chart.HorizontalAxis.ShowMinorGridlines = true;
chart.HorizontalAxis.MinorGridlinesCount = 12;

Axes_img4

MinorGridlineStyle

SfSmithChart provides support to customize the style of the minor gridlines by defining the MinorGridlineStyle property as shown in the below code snippet.

<syncfusion:SfSmithChart x:Name="SmithChart">
    <syncfusion:SfSmithChart.Resources>
        <Style TargetType="Path" x:Key="lineStyle">
            <Setter Property="Stroke" Value="BurlyWood"></Setter>
            <Setter Property="StrokeThickness" Value="0.45"></Setter>
            <Setter Property="StrokeDashArray" Value="7,3"></Setter>
        </Style>
    </syncfusion:SfSmithChart.Resources>
        <syncfusion:SfSmithChart.HorizontalAxis>
        <syncfusion:HorizontalAxis ShowMinorGridlines="True" MinorGridlinesCount="12" MinorGridlineStyle="{StaticResource lineStyle}">
        </syncfusion:HorizontalAxis>
   </syncfusion:SfSmithChart.HorizontalAxis>
</syncfusion:SfSmithChart>
chart.HorizontalAxis.MinorGridlineStyle = this.Grid1.Resources["lineStyle"] as Style;

Axes_img5

AxisLine

SfSmithChart provides support to customize the style of the axis line by defining the AxisLineStyle property and change the visibility by using ShowAxisLine property as shown in the below code snippet.

<syncfusion:SfSmithChart x:Name="SmithChart">
    <syncfusion:SfSmithChart.Resources>
        <Style TargetType="Path" x:Key="lineStyle">
                    <Setter Property="Stroke" Value="Black"></Setter>
                    <Setter Property="StrokeThickness" Value="1"></Setter>
                    <Setter Property="StrokeDashArray" Value="7,3"></Setter>
                </Style>
    </syncfusion:SfSmithChart.Resources>
        <syncfusion:SfSmithChart.HorizontalAxis>
        <syncfusion:HorizontalAxis ShowAxisLine="True" AxisLineStyle="{StaticResource lineStyle}">
        </syncfusion:HorizontalAxis>
   </syncfusion:SfSmithChart.HorizontalAxis>
</syncfusion:SfSmithChart>
chart.HorizontalAxis.AxisLineStyle = this.Grid1.Resources["lineStyle"] as Style;

Axes_img6

LabelPlacement

The LabelPlacement property is used to position the axis label either inside or outside of the chart plotting area. By default, LabelsPlacement is Outside.

<syncfusion:SfSmithChart x:Name="SmithChart">
        <syncfusion:SfSmithChart.HorizontalAxis>
        <syncfusion:HorizontalAxis LabelPlacement="Inside">
        </syncfusion:HorizontalAxis>
   </syncfusion:SfSmithChart.HorizontalAxis>
</syncfusion:SfSmithChart>
//Positioning the horizontal axis labels to bottom of AxisLine
chart.HorizontalAxis.LabelPlacement = LabelPlacement.Inside;

Axes_img7

LabelIntersectAction

When the Axis labels overlap with each other based on the chart dimensions and label size, use the LabelIntersectAction property of the axis to avoid overlapping. The default value of the LabelIntersectAction is Hide.

<syncfusion:SfSmithChart x:Name="SmithChart">
        <syncfusion:SfSmithChart.HorizontalAxis>
        <syncfusion:HorizontalAxis LabelIntersectAction="None">
        </syncfusion:HorizontalAxis>
   </syncfusion:SfSmithChart.HorizontalAxis>
</syncfusion:SfSmithChart>
//Set axis label intersect action
chart.HorizontalAxis.LabelIntersectAction = LabelIntersectActions.None;

Axes_img8

Radial Axis

Radial axis scale is used to measure the normalized reactance values.

MajorGridlines

By default, major gridlines are automatically added to the Axis. SfSmithChart supports customization of major gridline. The visibility of the major gridlines can be controlled by using the ShowMajorGridlines property.

<syncfusion:SfSmithChart>
     <syncfusion:SfSmithChart.RadialAxis>
         <syncfusion:RadialAxis ShowMajorGridlines="False">
         </syncfusion:RadialAxis >
     </syncfusion:SfSmithChart.RadialAxis >
 </syncfusion:SfSmithChart>
//Customizing radial(Reactance) axis to the chart 
chart.RadialAxis = new RadialAxis();
chart.RadialAxis.ShowMajorGridlines = false;

Axes_img9

MajorGridlineStyle

SfSmithChart provides support to customize the style of the major gridlines by defining the MajorGridlineStyle property as shown in the below code snippet.

<syncfusion:SfSmithChart x:Name="SmithChart">
    <syncfusion:SfSmithChart.Resources>
        <Style TargetType="Path" x:Key="lineStyle">
            <Setter Property="Stroke" Value="BurlyWood"></Setter>
            <Setter Property="StrokeDashArray" Value="5,3"></Setter>
        </Style>
    </syncfusion:SfSmithChart.Resources>
        <syncfusion:SfSmithChart.RadialAxis>
        <syncfusion:RadialAxis MajorGridlineStyle="{StaticResource lineStyle}">
        </syncfusion:RadialAxis >
   </syncfusion:SfSmithChart.RadialAxis>
</syncfusion:SfSmithChart>
chart.RadialAxis.MajorGridlineStyle = this.Grid1.Resources["lineStyle"] as Style;

Axes_img10

MinorGridlines

By default, minor gridlines are not added to the Axis. The visibility of the minor gridlines can be controlled by using the ShowMinorGridlines property.

<syncfusion:SfSmithChart>
     <syncfusion:SfSmithChart.RadialAxis>
         <syncfusion:RadialAxis ShowMinorGridlines="True">
         </syncfusion:RadialAxis>
     </syncfusion:SfSmithChart.RadialAxis>
 </syncfusion:SfSmithChart>
//Customizing radial(Reactance) axis to the chart 
chart.RadialAxis = new RadialAxis();
chart.RadialAxis.ShowMinorGridlines = true;

Axes_img11

MinorGridlinesCount

Minor gridlines can be added by defining MinorGridlinesCount property. By default, this value is eight. It means, every 100 pixels it renders maximum eight minor gridlines.

<syncfusion:SfSmithChart>
     <syncfusion:SfSmithChart.RadialAxis>
         <syncfusion:RadialAxis ShowMinorGridlines="True" MinorGridlinesCount="12">
         </syncfusion:RadialAxis>
     </syncfusion:SfSmithChart.RadialAxis>
 </syncfusion:SfSmithChart>
//Customizing radial(Reactance) axis to the chart 
chart.RadialAxis = new RadialAxis();
chart.RadialAxis.ShowMinorGridlines = true;
chart.RadialAxis.MinorGridlinesCount = 12;

Axes_img12

MinorGridlineStyle

SfSmithChart provides support to customize the style of the minor gridlines by defining the MinorGridlineStyle property as shown in the below code snippet.

<syncfusion:SfSmithChart x:Name="SmithChart">
    <syncfusion:SfSmithChart.Resources>
        <Style TargetType="Path" x:Key="lineStyle">
            <Setter Property="Stroke" Value="BurlyWood"></Setter>
            <Setter Property="StrokeThickness" Value="0.45"></Setter>
            <Setter Property="StrokeDashArray" Value="7,3"></Setter>
        </Style>
    </syncfusion:SfSmithChart.Resources>
        <syncfusion:SfSmithChart.RadialAxis>
        <syncfusion:RadialAxis ShowMinorGridlines="True" MinorGridlinesCount="12" MinorGridlineStyle="{StaticResource lineStyle}">
        </syncfusion:RadialAxis>
   </syncfusion:SfSmithChart.RadialAxis>
</syncfusion:SfSmithChart>
chart.RadialAxis.MinorGridlineStyle = this.Grid1.Resources["lineStyle"] as Style;

Axes_img13

AxisLine

SfSmithChart provides support to customize the style of the axis line by defining the AxisLineStyle property and change the visibility by using ShowAxisLine property as shown in the below code snippet.

<syncfusion:SfSmithChart x:Name="SmithChart">
    <syncfusion:SfSmithChart.Resources>
        <Style TargetType="Path" x:Key="lineStyle">
                    <Setter Property="Stroke" Value="Black"></Setter>
                    <Setter Property="StrokeThickness" Value="1"></Setter>
                    <Setter Property="StrokeDashArray" Value="7,3"></Setter>
                </Style>
    </syncfusion:SfSmithChart.Resources>
        <syncfusion:SfSmithChart.RadialAxis>
        <syncfusion:RadialAxis ShowAxisLine="True" AxisLineStyle="{StaticResource lineStyle}">
        </syncfusion:RadialAxis>
   </syncfusion:SfSmithChart.RadialAxis>
</syncfusion:SfSmithChart>
chart.RadialAxis.AxisLineStyle = this.Grid1.Resources["lineStyle"] as Style;

Axes_img14

LabelPlacement

The LabelPlacement property is used to position the axis label either inside or outside of the chart plotting area. By default, LabelsPlacement is Outside.

<syncfusion:SfSmithChart x:Name="SmithChart">
        <syncfusion:SfSmithChart.RadialAxis>
        <syncfusion:RadialAxis LabelPlacement="Inside">
        </syncfusion:RadialAxis>
   </syncfusion:SfSmithChart.RadialAxis>
</syncfusion:SfSmithChart>
//Positioning the radial axis labels to inside of Circle
chart.RadialAxis.LabelPlacement = LabelPlacement.Inside;

Axes_img15

LabelIntersectAction

When the Axis labels overlap with each other based on the chart dimensions and label size, use the LabelIntersectAction property of the axis to avoid overlapping. The default value of the LabelIntersectAction is Hide.

<syncfusion:SfSmithChart x:Name="SmithChart">
        <syncfusion:SfSmithChart.RadialAxis>
        <syncfusion:RadialAxis LabelIntersectAction="None">
        </syncfusion:RadialAxis>
   </syncfusion:SfSmithChart.RadialAxis>
</syncfusion:SfSmithChart>
//Set axis label intersect action
chart.RadialAxis.LabelIntersectAction = LabelIntersectActions.None;

Axes_img16

Events

  • LabelCreated– Occurs when the label is created.
  • C#
    • //Axis label created event hooked for RadialAxis
chart.RadialAxis.LabelCreated += RadialAxis_LabelCreated;

  //Event called for every label created in the axis.
  void RadialAxis_LabelCreated(object sender, EventArgs e)
  {
      var axisLabel = e as ChartAxisLabelEventArgs;

      //Customizing the specific label text and color
      if (axisLabel.Label.Text == "1")
      {
          axisLabel.Label.Text = "One";
          axisLabel.Label.Foreground = new SolidColorBrush(Colors.Red);
      }
  }

    Axes_img17