Range Padding in WinUI Chart (SfCartesianChart)

9 Jun 20226 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 PrimaryAxis is Auto and for SecondaryAxis is Round.

Additional

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

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

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

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

NumericalAxis range padding support in WinUI Chart

None

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

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

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

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

NumericalAxis range padding none in WinUI Chart

Round

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

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

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

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

NumericalAxis range padding round in WinUI 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

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

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

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

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

DateTimeAxis range padding support in WinUI Chart

None

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

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

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

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

DateTimeAxis range padding none in WinUI Chart

Round

<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>
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;

DateTimeAxis range padding round in WinUI Chart