Markers in Blazor Sparkline Component

13 Oct 20212 minutes to read

Data markers are used to provide information about the data points in the Sparkline series.

Adding markers

The Visible property in the SparklineMarkerSettings can be used to enable a marker by specifying a collection of special points. The following code example shows how to enable markers for all points.

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="350px">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }"></SparklineMarkerSettings>
    <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
</SfSparkline>

Blazor Sparkline Chart with Marker

Adding special point markers

The markers can be enabled for specific points as a collection. The following special points are applicable for markers.

All - Markers for all points are enabled.
Start - Markers for start points are enabled.
End - Markers for end points are enabled.
High - Markers for high points are enabled.
Low - Markers for low points are enabled.
Negative - Markers for negative points are enabled.
None - Markers for all points are disabled.

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="350px" HighPointColor="Blue" LowPointColor="Red">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.High, VisibleType.Low }"></SparklineMarkerSettings>
    <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
</SfSparkline>

Displaying High and Low Points Marker in Blazor Sparkline Chart

Markers customization

The following properties can be used to customize markers:

Fill - Specifies fill color for marker.
Opacity - Specifies opacity of Fill color for marker.
Size - Specifies marker size.
SparklineMarkerBorder - Specifies color and width for marker border.

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }" Fill="yellow" Opacity="0.4" Size="8">
        <SparklineMarkerBorder Color="green" Width="1">
        </SparklineMarkerBorder>
    </SparklineMarkerSettings>
    <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
</SfSparkline>

Blazor Sparkline Chart with Custom Marker