Version

Configuring Markers

Purpose

This topic demonstrates, with code examples, how to configure and customize the markers for XamSparkline™ control.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic Purpose

This topic provides an overview of the XamSparkline control, its benefits, and the supported chart types.

This topic provides an overview of the possible ways to configure the XamSparkline control. Links to the detailed configurations (available in separate topics) are provided as well.

This topic demonstrates, with code examples, how to define the markers for XamSparkline control.

Configuring Markers – Conceptual Overview

Overview

Markers, as it is explained in Defining Markers topic, are symbols (circular colored icons) overlaid on the Sparkline to indicate the individual data points based on X/Y coordinates.

Markers can be customized to have an appearance of your choice. By default, markers are not set to display. In order to display any marker, you need to set the visibility property to Visible such as the following:`MarkerVisibility``="Visible"`

Markers can be configured in the following aspects:

  • Brush

  • Size

Property settings

The following table maps the configuration tasks to the corresponding markers’ property settings.

In order to: Use this property: And set it to:

Change the color of the marker

The brush value

Change the size of the marker

The desired numeric value

Configuring the Markers – Code Example

Description

The code below demonstrates how to configure the first, last and negative markers.

Preview

Configuring Markers 1.png

Code

In XAML:

<ig:XamSparkline x:Name="xamSparkline1" ItemsSource="{StaticResource DataSource}"
    ValueMemberPath="Value"
    DisplayType="Line"
    NegativeMarkerVisibility="Visible"
    NegativeMarkerSize="15"
    NegativeMarkerBrush="#FFFF00"
    FirstMarkerVisibility="Visible"
    FirstMarkerSize="15"
    FirstMarkerBrush="#000000"
    LastMarkerVisibility="Visible"
    LastMarkerSize="15"
    LastMarkerBrush="#808080">
</ig:XamSparkline>

Related Content

The following topics provide additional information related to this topic.

Topic Purpose

This topic provides an overview of the XamSparkline control, its benefits, and the supported chart types.

This topic provides an overview of the possible ways to configure the XamSparkline control. Links to the detailed configurations (available in separate topics) are provided as well.

This topic explains the featured properties of the XamSparkline control.