Markers in Blazor Sparkline Component

20 May 20262 minutes to read

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

Adding Markers

The Visible property in SparklineMarkerSettings enables markers by specifying a collection of special points. The following 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>

Adding Special Point Markers

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

• All – Markers for all points
• Start – Markers for start points
• End – Markers for end points
• High – Markers for high points
• Low – Markers for low points
• Negative – Markers for negative points
• 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>

Markers Customization

The following properties can be used to customize markers:

• Fill - Specifies fill color for marker
• Opacity - Specifies opacity of marker Fill color
• 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>