Markers in Blazor Sparkline Component

4 Aug 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>

Sparkline 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.

The following code example shows how to enable high and low point markers.

@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>

Sparkline Chart marker for high and low points

Markers customization

The following properties can be used to customize markers:

@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>

Sparkline Chart - Markers Customization