Search results

Marker and Data labels

Markers and data labels are used to provide information about the data points in the series. You can add a shape to adorn each data point. By default, both the markers and data labels are disabled in Smith Chart. You can enable both of them by setting the Visible property to true in marker and data label settings.

Marker

The default, the visibility of marker is false. You can enable the marker by setting the Visible property to true in the SmithchartSeriesMarker tag. Using marker settings, you can customize the marker separately for each series in the Smith Chart.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartSeriesCollection>
        <SmithchartSeries Name="First transmission" Points="@firstTransmissionData">
            <SmithchartSeriesMarker Visible="true"></SmithchartSeriesMarker>
        </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 marker

Marker customization

Using the SmithchartSeriesMarker tag, you can customize the following marker properties separately for each series in the Smith Chart:

  • Width - Controls the width of the marker.
  • Height - Controls the height of the marker.
  • Fill - Customizes the fill color of the marker.
  • Opacity - Customizes the opacity of the marker.
  • SmithchartSeriesMarkerBorder - Controls the width and color of the marker’s border.
  • Shape - Changes the shape of the marker.
@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartSeriesCollection>
        <SmithchartSeries Points='@firstTransmissionData'>
            <SmithchartSeriesMarker
                Visible="true"
                Height="10"
                Width="10"
                Fill="#ff99ff"
                Opacity="1"
                Shape="Rectangle">
            <SmithchartSeriesMarkerBorder
                Width="2"
                Color="#cc00cc">
            </SmithchartSeriesMarkerBorder>
            </SmithchartSeriesMarker>
        </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 custom marker

Data labels

By default, the data labels are disabled. You can enable the data label by setting the Visible property to true in the SmithchartSeriesDataLabel tag. For each point in series, data label is created. Data label for each series can be customized separately using SmithchartSeriesDataLabel.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartSeriesCollection>
        <SmithchartSeries Points="@firstTransmissionData">
            <SmithchartSeriesMarker Visible="true">
                <SmithchartSeriesDataLabel Visible="true"></SmithchartSeriesDataLabel>
            </SmithchartSeriesMarker>
        </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 data label

Data label customization

Using SmithchartSeriesDataLabel in the SmithchartSeriesMarker tag, you can customize the data label for each series separately. In data labels, you can customize the following properties separately for each series:

  • Fill - Changes the fill color of the data label’s shape.
  • Opacity - Controls the opacity of the data label’s shape.
  • SmithchartSeriesDataLabelBorder - Customizes the width and color of the border.
  • TextStyle - Customizes the font color, width and size.
@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart>
    <SmithchartSeriesCollection>
        <SmithchartSeries Points="@firstTransmissionData">
            <SmithchartSeriesMarker Visible="true">
                <SmithchartSeriesDataLabel Visible="true" Fill="#99ffcc" Opacity="1">
                    <SmithchartSeriesDataLabelBorder Color="green" Width="2">
                    </SmithchartSeriesDataLabelBorder>
                </SmithchartSeriesDataLabel>
            </SmithchartSeriesMarker>
        </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 custom data label