New to Telerik UI for WPF? Download free 30-day trial

Indicators

The controls from the RadSparkline suite support several types of indicators which can be used to highlight the plotted data.

Markers

The markers are visual indicators showing the location of each data point along the graph line. This setting is applicable to sparkline controls deriving from RadLinearSparklineBase - RadLinearSparkline and RadAreaSparkline. To enable the markers set the ShowMarkers property to True.

Example 1: Show markers of RadLinearSparkline in XAML

 <telerik:RadLinearSparkline ShowMarkers="True" /> 

Example 2: Show markers of RadLinearSparkline in code

this.sparklineControl.ShowMarkers = true; 

Figure 1: RadLinearSparkline and RadAreaSparkline with shown markers

RadLinearSparkline and RadAreaSparkline

You can change the color of the marker via the MarkersBrush property.

The markers can be customized via the MarkersStyle property of the control.

Example 3: Setting MarkersStyle

<telerik:RadLinearSparkline.MarkersStyle> 
    <Style TargetType="telerik:IndicatorItem">                     
        <Setter Property="telerik:RadToolTipService.ToolTipContent" Value="{Binding DataItem}" /> 
        <Setter Property="Template"> 
            <Setter.Value> 
                <ControlTemplate TargetType="telerik:IndicatorItem"> 
                    <Rectangle Fill="{TemplateBinding Fill}" Width="10" Height="10" /> 
                </ControlTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 
</telerik:RadLinearSparkline.MarkersStyle> 

Figure 2: RadLinearSparkline with custom MarkersStyle

RadLinearSparkline with custom MarkersStyle

High Point

This is a visual indicator which highlights the single highest-value datapoint in a series. In case there is more than one high point, all such points are highlighted. If the spark line is of type RadColumnSparkline or RadWinLossSparkLine, the bar which represents the highest value is highlighted. The highpoint is enabled by setting the ShowHighPointIndicator property to True.

Example 4: Show high point indicator of RadColumnSparkline in XAML

 <telerik:RadColumnSparkline ShowHighPointIndicators="True" /> 

Example 5: Show high point indicator of RadColumnSparkline in code

this.sparklineControl.ShowHighPointIndicators = true; 

Figure 3: RadColumnSparkline with shown high point indicator

RadColumnSparkline with shown high point indicator

You can change the color of the high point indicator via the HighPointBrush property.

You can customize the appearance of the data point via the HighPointStyle property.

Example 6: Setting HighPointStyle

<telerik:RadColumnSparkline.HighPointStyle> 
    <Style TargetType="telerik:Column"> 
        <Setter Property="Opacity" Value="0.5" /> 
    </Style> 
</telerik:RadColumnSparkline.HighPointStyle> 

Figure 4: RadColumnSparkline with custom HighPointStyle

RadColumnSparkline with custom HighPointStyle

Low Point

This is a visual indicator which highlights the single lowest-value datapoint in a series. In case there is more than one such point, all similar points are highlighted. If the spark line is of type RadColumnSparkline or RadWinLossSparkLine, the bar which represents the lowest value is highlighted. The low point is enabled by setting the ShowLowPointIndicator property to True.

Example 7: Show low point indicator of RadColumnSparkline in XAML

 <telerik:RadColumnSparkline ShowLowPointIndicators="True" /> 

Example 8: Show low point indicator of RadColumnSparkline in code

this.sparklineControl.ShowLowPointIndicators = true; 

Figure 5: RadColumnSparkline with shown low point indicator

RadColumnSparkline with shown low point indicator

You can change the color of the low point indicator via the LowPointBrush property.

You can customize the appearance of the data point via the LowPointStyle property.

Example 9: Setting LowPointStyle

<telerik:RadColumnSparkline.LowPointStyle> 
    <Style TargetType="telerik:Column"> 
        <Setter Property="Opacity" Value="0.5" /> 
    </Style> 
</telerik:RadColumnSparkline.LowPointStyle> 

Figure 6: RadColumnSparkline with custom LowPointStyle

RadColumnSparkline with custom LowPointStyle

Negative Points

These visual indicators highlight all negative data points in a series. If the spark line is of type RadColumnSparkline or RadWinLossSparkLine the bars which represent negative values are highlighted. The negative points indicators are enabled by setting the ShowNegativePointsIndicator to True.

Example 10: Show negative points of RadLinearSparkline in XAML

 <telerik:RadLinearSparkline ShowNegativePointIndicators="True" /> 

Example 11: Show negative points of RadLinearSparkline in code

this.sparklineControl.ShowNegativePointIndicators = true; 

Figure 7: RadLinearSparkline with shown negative point indicators

RadLinearSparkline with shown negative point indicators

You can change the color of the negative points via the NegativePointBrush property.

The negative points can be customized via the NegativePointStyle property of the control.

Example 12: Setting NegativePointStyle (see Figure 7)

<telerik:RadLinearSparkline.NegativePointStyle> 
    <Style TargetType="telerik:IndicatorItem">           
        <Setter Property="Template"> 
            <Setter.Value> 
                <ControlTemplate TargetType="telerik:IndicatorItem"> 
                    <Ellipse Fill="{TemplateBinding Fill}" Width="10" Height="10" /> 
                </ControlTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 
</telerik:RadLinearSparkline.NegativePointStyle> 

First Point

This is a visual indicator, which highlights the first data point in a series. If the spark line is of type RadColumnSparkline or RadWinLossSparkLine the bar which represents the first data point is highlighted. If the spark line is of type RadColumnSparkline or RadWinLossSparkLine the first bar is highlighted.

The first point is enabled in the series by setting the ShowFirstPointIndicator property to True.

Example 13: Show first point of RadLinearSparkline in XAML

 <telerik:RadLinearSparkline ShowFirstPointIndicator="True" /> 

Example 14: Show first point of RadLinearSparkline in code

this.sparklineControl.ShowFirstPointIndicator = true; 

Figure 8: RadLinearSparkline with shown first point indicator

RadLinearSparkline with shown first point indicator

You can change the color of the first point via the FirstPointBrush property.

The first point can be customized via the FirstPointStyle property of the control.

Example 15: Setting FirstPointStyle (see Figure 8)

<telerik:RadLinearSparkline.FirstPointStyle> 
    <Style TargetType="telerik:IndicatorItem">           
        <Setter Property="Template"> 
            <Setter.Value> 
                <ControlTemplate TargetType="telerik:IndicatorItem"> 
                    <Ellipse Fill="{TemplateBinding Fill}" Width="10" Height="10" /> 
                </ControlTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 
</telerik:RadLinearSparkline.FirstPointStyle> 

Last Point

This is a visual indicator which highlights the last data point in a series. If the spark line is of type RadColumnSparkline or RadWinLossSparkLine the bar which represents the last value is highlighted. The last point is indicated in the series, by setting the ShowLastPointIndicator property to True.

Example 16: Show last point of RadLinearSparkline in XAML

 <telerik:RadLinearSparkline ShowFirstPointIndicator="True" /> 

Example 17: Show last point of RadLinearSparkline in code

this.sparklineControl.ShowFirstPointIndicator = true; 

Figure 9: RadLinearSparkline with shown last point indicator

RadLinearSparkline with shown last point indicator

You can change the color of the last point via the LastPointBrush property.

The last point can be customized via the LastPointStyle property of the control.

Example 18: Setting LastPointStyle (see Figure 9)

<telerik:RadLinearSparkline.LastPointStyle> 
    <Style TargetType="telerik:IndicatorItem">           
        <Setter Property="Template"> 
            <Setter.Value> 
                <ControlTemplate TargetType="telerik:IndicatorItem"> 
                    <Ellipse Fill="{TemplateBinding Fill}" Width="10" Height="10" /> 
                </ControlTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 
</telerik:RadLinearSparkline.LastPointStyle> 

Empty Points

There are cases when the collection of data to which the Sparkline is bound may contain empty elements (null values) with no data to which the control can bind and visualize. The behavior of the control in such cases is governed by the EmptyPointBehavior property of the control. There are two possible settings:

  • DropPoint: The empty point is removed. This is the default value.
  • ShowAsZero: The empty point visualizes as though its original value was zero.

Example 19: Setting EmptyPointBehavior

<telerik:RadColumnSparkline EmptyPointBehavior="ShowAsZero" /> 

Figure 10: RadLinearSparkline and RadColumnSparkline with a single null value shown as zero

RadLinearSparkline and RadColumnSparkline

See Also

In this article