Show and Hide Axis in UWP Sparkline

18 Nov 20184 minutes to read

ShowAxis is used to enable the axis and this feature is applicable for all the sparklines except WinLoss sparkline. Also, you can style the axis by the AxisStyle property and position the axis by the AxisOrigin property.

  • ShowAxis – Gets or sets the bool value whether to show or hide the axis.
  • AxisOrigin - Gets or sets the double for axis origin.
  • AxisStyle – Gets or sets the style for axis line.

Show axis

<Syncfusion:SfLineSparkline Interior="#4a4a4a" BorderBrush="DarkGray" BorderThickness="1" ShowAxis="True"
                            ItemsSource="{Binding UsersList}" YBindingPath="NoOfUsers">

</Syncfusion:SfLineSparkline >
SfLineSparkline sparkline = new SfLineSparkline()
{
    ItemsSource = new SparkViewModel().UsersList,
    YBindingPath = "NoOfUsers",
    ShowAxis = true,
    Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),
    BorderBrush = new SolidColorBrush(Colors.DarkGray),
    BorderThickness = new Thickness(1)
};

Show Axis

Axis origin

<Syncfusion:SfLineSparkline Height="250" Width="350" Interior="#4a4a4a" BorderBrush="DarkGray" BorderThickness="1"
                            ShowAxis="True" AxisOrigin="2" ItemsSource="{Binding UsersList}" YBindingPath="NoOfUsers">

</Syncfusion:SfLineSparkline >
SfLineSparkline sparkline = new SfLineSparkline()
{
    ItemsSource = new SparkViewModel().UsersList,
    YBindingPath = "NoOfUsers",
    ShowAxis = true,
    AxisOrigin = 2,
    Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),
    BorderBrush = new SolidColorBrush(Colors.DarkGray),
    BorderThickness = new Thickness(1)
};

Axis Origin

Axis LineStyle

<Grid.Resources>

    <Style TargetType="Line" x:Key="lineStyle2">

        <Setter Property="Stroke" Value="Blue"/>

        <Setter Property="StrokeThickness" Value="2"></Setter>

        <Setter Property="StrokeDashArray" Value="1,1"></Setter>

    </Style>

</Grid.Resources>

<Syncfusion:SfLineSparkline Height="250" Width="350" Interior="#4a4a4a" BorderBrush="DarkGray"  BorderThickness="1"
                            ShowAxis="True" AxisStyle="{StaticResource lineStyle2}" AxisOrigin="1" 
                            ItemsSource="{Binding UsersList}" YBindingPath="NoOfUsers">

</Syncfusion:SfLineSparkline >
SfLineSparkline sparkline = new SfLineSparkline()
{
    ItemsSource = new SparkViewModel().UsersList,
    YBindingPath = "NoOfUsers",
    ShowAxis = true,
    AxisOrigin = 1,
    AxisStyle = grid.Resources["lineStyle2"] as Style,
    Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),
    BorderBrush = new SolidColorBrush(Colors.DarkGray),
    BorderThickness = new Thickness(1)
};

Customizing Axis line