Customize Data Points in Xamarin Sparkline (SfSparkline)

18 May 20217 minutes to read

Color of the first, last, high, low and negative data points can be customized using the following properties.

• FirstPointColor - used to change the first point color of the sparkline.
• LastPointColor - used to change the last point color of the sparkline.
• HighPointColor - used to change the high point color of the sparkline.
• LowPointColor - used to change the low point color of the sparkline.
• NegativePointsColor - used to change the negative point color of the sparkline.

NOTE

NegativePointsColor is applicable for SfColumnSparkline and SfWinLossSparkline alone.

Code snippet to customize the markers

XAML

<sparkline:SfLineSparkline ItemsSource = "{Binding Data}" 
                            YBindingPath = "Performance"
                            FirstPointColor="Green"
                            LastPointColor="Blue"
                            HighPointColor="Purple"
                            LowPointColor="Red">  
    <sparkline:SfLineSparkline.Marker>
        <sparkline:MarkerBase IsVisible="True" 
                              Width= "15"
                              Height= "15"/>
    </sparkline:SfLineSparkline.Marker> 
</sparkline:SfLineSparkline>

C#

SfLineSparkline lineSparkline = new SfLineSparkline()
{
    YBindingPath = "Performance",
    ItemsSource = viewModel.Data,
    Marker = new MarkerBase()
    {
        IsVisible = true,
        Width = 15,
        Height = 15
    },

    FirstPointColor = Color.Green,
    LastPointColor = Color.Blue,
    HighPointColor = Color.Purple,
    LowPointColor = Color.Red
};

Code snippet to customize the segments

XAML

<sparkline:SfColumnSparkline ItemsSource="{Binding Data}" 
                              YBindingPath="Performance"
                              FirstPointColor="Green"
                              LastPointColor="Purple"
                              HighPointColor="Maroon"
                              LowPointColor="Blue"
                              NegativePointsColor="Red">    
  
</sparkline:SfColumnSparkline>

C#

SfColumnSparkline columnSparkline = new SfColumnSparkline()
{
    YBindingPath = "Performance",
    ItemsSource = viewModel.Data,
    FirstPointColor = Color.Green,
    LastPointColor = Color.Purple,
    HighPointColor = Color.Maroon,
    LowPointColor = Color.Blue,
    NegativePointsColor = Color.Red
};

Padding

The padding property represents the distance between an element and its child elements. Padding can be applied in specific direction or in all directions. Padding can be applied for all sparkline types.

XAML

<sparkline:SfLineSparkline ItemsSource="{Binding Data}" 
                              YBindingPath="Performance"
                              BackgroundColor="Bisque"
                              Padding="25"
                              >   
<sparkline:SfLineSparkline.Marker>
	       <sparkline:MarkerBase                                      IsVisible="True" 
                                Color = "Red"
                                 Width="15"
                                 Height="15"/>
     </sparkline:SfLineSparkline.Marker>                                
  
</sparkline:SfLineSparkline>

C#

SfLineSparkline lineSparkline = new SfLineSparkline()
{
    YBindingPath = "Performance",
    ItemsSource = viewModel.Data,
    BackgroundColor = Color.Bisque,
    Padding = new Thickness(25),
    Marker = new MarkerBase()
    {
        IsVisible = true,
        Color = Color.Red,
        Width = 15,
        Height = 15
    }
};