This section explains how to add markers 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.
The following code example shows enabling 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>
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.
@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 markers can be customized using following properties:
Fill
- Specifies fill color for markerOpacity
- Specifies opacity of fill color for markerSize
- Specifies marker sizeSparklineMarkerBorder
- Specifies marker border color and widthThe following code example shows customizing marker’s fill color, border style and size.
@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>