Tick Lines in WinUI Chart (SfCartesianChart)

30 Sep 20223 minutes to read

Tick lines are the small lines which are drawn on the axis line representing the axis labels. Tick lines will be drawn outside of the axis by default.

The minor tick lines can be added to the axis by defining the MinorTicksPerInterval property. This property will add the minor tick lines to every interval based on value.

NOTE

For category axis, minor tick lines are not applicable. Since it is rendered based on index positions.

XAML

<chart:SfCartesianChart>
. . .
<chart:SfCartesianChart.XAxes>
    <chart:NumericalAxis MinorTicksPerInterval="4"/>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
    <chart:NumericalAxis />
</chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
NumericalAxis primaryAxis = new NumericalAxis()
{
   MinorTicksPerInterval = 4 
};
chart.XAxes.Add(primaryAxis);

chart.YAxes.Add(new NumericalAxis());

Size

Both major and minor tick lines height can be customized by using the TickLineSize and MinorTickLineSize properties respectively.

XAML

<chart:SfCartesianChart>
. . .
<chart:SfCartesianChart.XAxes>
    <chart:NumericalAxis MinorTickLineSize="10" 
                         MinorTicksPerInterval="4" 
                         TickLineSize="15"/>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
    <chart:NumericalAxis />
</chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
NumericalAxis primaryAxis = new NumericalAxis()
{
   TickLineSize = 15,
   MinorTickLineSize = 10,
   MinorTicksPerInterval = 4
};
chart.XAxes.Add(primaryAxis);

chart.YAxes.Add(new NumericalAxis());

Customization

Both major and minor tick lines can be customized by using the MajorTickStyle and MinorTickStyle properties respectively.

XAML

<chart:SfCartesianChart>
. . .
<chart:SfCartesianChart.Resources>
    <Style TargetType="Line" x:Key="lineStyle">
        <Setter Property="StrokeThickness" Value="1"/>
        <Setter Property="Stroke" Value="Red"/>
    </Style>
</chart:SfCartesianChart.Resources>

<chart:SfCartesianChart.XAxes>
    <chart:NumericalAxis MinorTicksPerInterval="4" 
                         MinorTickStyle="{StaticResource lineStyle}"  
                         MajorTickStyle="{StaticResource lineStyle}" />
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
    <chart:NumericalAxis />
</chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
NumericalAxis primaryAxis = new NumericalAxis()
{
    MinorTicksPerInterval = 4,
    MajorTickStyle = chart.Resources["lineStyle"] as Style,
    MinorTickStyle = chart.Resources["lineStyle"] as Style 
};
chart.XAxes.Add(primaryAxis);

chart.YAxes.Add(new NumericalAxis());