Search results

Markers

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.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSparkline 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>
</EjsSparkline>

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.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSparkline 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>
</EjsSparkline>

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.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSparkline 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>
</EjsSparkline>

Sparkline Charts with All Marker Sample