Tick Lines in WinUI Chart

18 Nov 20183 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 the value.

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

<chart:SfCartesianChart>

    <!-- Configure additional chart elements -->
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis MinorTicksPerInterval="4"/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// Configure additional chart elements
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.

<chart:SfCartesianChart>

    <!-- Configure additional chart elements -->
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis MinorTickLineSize="10" MinorTicksPerInterval="4" TickLineSize="15"/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// Configure additional chart elements
NumericalAxis primaryAxis = new NumericalAxis()
{
   TickLineSize = 15,
   MinorTickLineSize = 10,
   MinorTicksPerInterval = 4
};

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

Axis tick lines height support in WinUI Chart

Customization

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

<chart:SfCartesianChart>

    <!-- Configure additional chart elements -->
    <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>
SfCartesianChart chart = new SfCartesianChart();

// The 'lineStyle' resource is defined in XAML Resources and referenced here.
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());

Axis tick lines customization support in WinUI Chart

See Also