Customize segment brush in UWP Sparkline (SfSparkline)

10 May 20211 minute to read

We can able to customize the first, last, negative, high and low point brushes of column sparkline as like markers in area and line sparkline.

• FirstPointBrush – Gets or sets the brush to paint the first point of the sparkline.
• LastPointBrush – Gets or sets the brush to paint the last point of the sparkline.
• LowPointBrush – Gets or sets the brush to paint the low point of the sparkline.
• HighPointBrush – Gets or sets the brush to paint the high point of the sparkline.
• NegativePointBrush – Gets or sets the brush to paint the negative point of the sparkline.

XAML

<Syncfusion:SfColumnSparkline Interior="#4a4a4a" 

BorderBrush="DarkGray" BorderThickness="1"

ItemsSource="{Binding UsersList}" 

YBindingPath="NoOfUsers">

<Syncfusion:SfColumnSparkline.SegmentTemplateSelector>

<Syncfusion:SegmentTemplateSelector FirstPointBrush="Yellow" 

LastPointBrush="Red" NegativePointBrush="Cyan"

LowPointBrush="Purple" HighPointBrush="Blue"/>

</Syncfusion:SfColumnSparkline.SegmentTemplateSelector>

</Syncfusion:SfColumnSparkline >

C#

SfColumnSparkline sparkline = new SfColumnSparkline()
{

    ItemsSource = new SparkViewModel().UsersList,

    YBindingPath = "NoOfUsers"

};

SegmentTemplateSelector selector = new SegmentTemplateSelector()
{

    FirstPointBrush = new SolidColorBrush(Colors.Yellow),

    LastPointBrush = new SolidColorBrush(Colors.Yellow),

    HighPointBrush = new SolidColorBrush(Colors.Red)

};

sparkline.SegmentTemplateSelector = selector;