Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Markers

14 Apr 2021 / 2 minutes to read

This section explains how to add markers to the Sparkline Charts.

Adding marker to the Sparkline Charts

To add marker to the Sparkline Charts, specify the Visible of SparklineMarkerSettings as following values. The Visible will accept multiple values too.

  • All - Enables markers for all points.
  • Start - Enables marker for the start point.
  • End - Enables marker for the end point.
  • High - Enables marker for the high point.
  • Low - Enables marker for the low point.
  • Negative - Enables markers for the negative points.

The following code example shows enabling markers for all points.

Copied to clipboard
@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 charts with marker

Adding marker to special point

In Sparkline Charts, markers can be enabled for particular points such as the start, end, low, high, or negative. The following code examples shows enabling markers for the high and low points.

Copied to clipboard
@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 Charts marker for high and low points

Customizing markers

Sparkline Charts markers can be customized using following properties:

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

The following code example shows customizing marker’s fill color, border style and size.

Copied to clipboard
@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 }"
                         Fill="yellow"
                         Opacity="0.4"
                         Size="20">
    <SparklineMarkerBorder Color="green"
                           Width="2">
    </SparklineMarkerBorder>
</SparklineMarkerSettings>
<SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
</SfSparkline>

Sparkline Charts with All Marker Sample

Previous
Next