Range Padding in WinUI Chart (SfCartesianChart)

13 Jun 20247 minutes to read

Range padding is used to apply the minimum and maximum extremes of chart axis range by using the RangePadding property. The NumericalAxis and DateTimeAxis have a RangePadding property that can be used to add padding to the range of the chart axis.

Numerical Range Padding

The RangePadding is used to set the numeric range for axis.

The following types are available for NumericalAxis range padding:

• Additional - The visible start and end range will be added with an additional interval.
• None - The visible range sets to exact minimum and maximum value of the items source.
• Normal - The visible range will be the actual range calculated from given items source and series types.
• Auto - Automatically chosen based on the orientation of the axis.
• Round - The visible start and end range round to nearest interval value.
• RoundStart - The visible start range round to nearest interval value.
• RoundEnd - The visible end range round to nearest interval value.
• PrependInterval - The visible start range will be prepended with an additional interval.
• AppendInterval - The visible end range will be appended with an additional interval.

By default, the RangePadding value for XAxes is Auto and for YAxes is Round.

Additional

XAML

<chart:SfCartesianChart>
. . .
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis RangePadding="Additional"/>
    </chart:SfCartesianChart.XAxes>

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

C#

SfCartesianChart chart = new SfCartesianChart();

NumericalAxis primaryAxis = new NumericalAxis()
{
    RangePadding = NumericalPadding.Additional,
};
chart.XAxes.Add(primaryAxis);

chart.YAxes.Add(new NumericalAxis());
. . .
this.Content = chart;

None

XAML

<chart:SfCartesianChart>
. . .
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis RangePadding="None"/>
    </chart:SfCartesianChart.XAxes>

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

C#

SfCartesianChart chart = new SfCartesianChart();

NumericalAxis primaryAxis = new NumericalAxis()
{
    RangePadding = NumericalPadding.None,
};
chart.XAxes.Add(primaryAxis);

chart.YAxes.Add(new NumericalAxis());
. . .
this.Content = chart;

Round

XAML

<chart:SfCartesianChart>
. . .
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis  RangePadding="Round"/>
    </chart:SfCartesianChart.XAxes>

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

C#

SfCartesianChart chart = new SfCartesianChart();

NumericalAxis primaryAxis = new NumericalAxis()
{
    RangePadding = NumericalPadding.Round,
};
chart.XAxes.Add(primaryAxis);

chart.YAxes.Add(new NumericalAxis());
. . .
this.Content = chart;

DateTime Range Padding

The RangePadding types available in the DateTimeAxis are:

• Auto - Automatically chosen based on the orientation of the axis.
• Additional - The visible start and end range will be added with an additional interval.
• None - The visible range sets to exact minimum and maximum value of the items source.
• Round - The visible start and end range round to nearest interval value.
• RoundStart - The visible start range round to nearest interval value.
• RoundEnd - The visible end range round to nearest interval value.
• PrependInterval - The visible start range will be prepended with an additional interval.
• AppendInterval - The visible start range will be appended with an additional interval.

Additional

XAML

<chart:SfCartesianChart>
. . .
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis RangePadding="Additional">
        <chart:DateTimeAxis.LabelStyle>
            <chart:LabelStyle LabelFormat="MMM-yy" />
        </chart:DateTimeAxis.LabelStyle>
    </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>

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

C#

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis primaryAxis = new DateTimeAxis()
{
    RangePadding = DateTimeRangePadding.Additional,
    LabelStyle = new LabelStyle() { LabelFormat= "MMM-yy" }
};
chart.XAxes.Add(primaryAxis);

chart.YAxes.Add(new NumericalAxis());
. . .
this.Content = chart;

None

XAML

<chart:SfCartesianChart>
. . .
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis RangePadding="None">
        <chart:DateTimeAxis.LabelStyle>
            <chart:LabelStyle LabelFormat="MMM-yy" />
        </chart:DateTimeAxis.LabelStyle>
    </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>

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

C#

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis primaryAxis = new DateTimeAxis()
{
    RangePadding = DateTimeRangePadding.None,
    LabelStyle = new LabelStyle() { LabelFormat= "MMM-yy" }
};
chart.XAxes.Add(primaryAxis);

chart.YAxes.Add(new NumericalAxis());
. . .
this.Content = chart;

Round

XAML

<chart:SfCartesianChart>
. . .
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis RangePadding="Round" LabelFormat="MMM-yy"/>
    </chart:SfCartesianChart.XAxes>

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

C#

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis primaryAxis = new DateTimeAxis()
{
    RangePadding = DateTimeRangePadding.Round,
    LabelFormat = "MMM-yy"
};
chart.XAxes.Add(primaryAxis);

chart.YAxes.Add(new NumericalAxis());
. . .
this.Content = chart;