Customize segment brush in UWP Sparkline (SfSparkline)

10 Jul 20261 minute to read

We can customize the first, last, negative, high, and low point brushes of column sparkline 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;