Auto scrolling in .NET MAUI Cartesian Chart

10 Jul 20263 minutes to read

Auto-scrolling in .NET MAUI Cartesian Chart ensures that a specified range of data is always visible, making it ideal for real-time data feeds and streaming dashboards. The AutoScrollingDelta property of the chart axis sets the number of data points to be always visible. As new data points are added, the visible range scrolls to keep them in view, and you can use the AutoScrollingMode property to control the scroll direction.

By adding ChartZoomPanBehavior to the chart, you can manually scroll to view previous data points.

NOTE

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

<chart:SfCartesianChart>
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis AutoScrollingDelta="3"/>
    </chart:SfCartesianChart.XAxes>
    <chart:SfCartesianChart.ZoomPanBehavior>
        <chart:ChartZoomPanBehavior EnablePanning="True"/>
    </chart:SfCartesianChart.ZoomPanBehavior>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

CategoryAxis primaryAxis = new CategoryAxis()
{
    AutoScrollingDelta = 3,
};
chart.XAxes.Add(primaryAxis);

ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
    EnablePanning = true
};
chart.ZoomPanBehavior = zooming;
// code omitted for brevity
this.Content = chart;

Auto scrolling mode

The AutoScrollingMode property of the ChartAxis class determines whether the axis scrolls from the start or end of the data. The ChartAutoScrollingMode enum provides the following values:

  • Start — Scrolls from the start, keeping earlier data points visible as new data is added.
  • End — Scrolls from the end (default), keeping the latest data points visible as new data is added.
<chart:SfCartesianChart>
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis AutoScrollingDelta="3" AutoScrollingMode="Start"/>
    </chart:SfCartesianChart.XAxes>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

CategoryAxis primaryAxis = new CategoryAxis()
{
    AutoScrollingDelta = 3,
    AutoScrollingMode = ChartAutoScrollingMode.Start
};
chart.XAxes.Add(primaryAxis);
// code omitted for brevity
this.Content = chart;

Auto scrolling delta type

When using DateTimeAxis in .NET MAUI Cartesian Chart, you can set the time unit for auto-scrolling delta using the AutoScrollingDeltaType property. The DateTimeDeltaType enum provides the following values:

  • Years — Sets delta in years.
  • Months — Sets delta in months.
  • Days — Sets delta in days.
  • Hours — Sets delta in hours.
  • Minutes — Sets delta in minutes.
  • Seconds — Sets delta in seconds.
  • Milliseconds — Sets delta in milliseconds.
  • Auto (default) — Calculates the delta automatically based on the data range.
<chart:SfCartesianChart>
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis AutoScrollingDelta="3" AutoScrollingDeltaType="Days"/>
    </chart:SfCartesianChart.XAxes>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis primaryAxis = new DateTimeAxis()
{
    AutoScrollingDelta = 3,
    AutoScrollingDeltaType = DateTimeDeltaType.Days
};
chart.XAxes.Add(primaryAxis);
// code omitted for brevity
this.Content = chart;