Axis Range Padding in .NET MAUI Cartesian Chart

10 Jul 20267 minutes to read

Range padding is used to set the minimum and maximum extremes of the chart axis range by using the RangePadding property. The RangePadding property, available on axes derived from RangeAxisBase such as NumericalAxis, DateTimeAxis, and LogarithmicAxis, can be used to add padding to the range of the chart axis.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfCartesianChart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

Numerical Range Padding

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

The following NumericalPadding values 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 NumericalAxis is Auto.

Additional

XAML

<chart:SfCartesianChart>

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

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

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

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

// code omitted for brevity
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>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

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

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);
// code omitted for brevity
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>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

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

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);
// code omitted for brevity
this.Content = chart;

DateTime Range Padding

The following DateTimeRangePadding values are available for the DateTimeAxis:

• 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 end range will be appended with an additional interval.

By default, the RangePadding value for the DateTimeAxis is Auto.

Additional

XAML

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

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    <chart:SfCartesianChart.Series>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis primaryAxis = new DateTimeAxis()
{
    RangePadding = DateTimeRangePadding.Additional
};
chart.XAxes.Add(primaryAxis);

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

// code omitted for brevity
this.Content = chart;

None

XAML

<chart:SfCartesianChart>

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

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis primaryAxis = new DateTimeAxis()
{
    RangePadding = DateTimeRangePadding.None
};
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);
// code omitted for brevity
this.Content = chart;

Round

XAML

<chart:SfCartesianChart>

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

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis primaryAxis = new DateTimeAxis()
{
    RangePadding = DateTimeRangePadding.Round
};
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);
// code omitted for brevity
this.Content = chart;