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 }
};
}
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 }
};
}
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 }
};
}
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 }
};
}