DxChartAxisRange Class

Specifies the visible range for the chart’s axes.

Assembly: DevExpress.Blazor.v23.2.dll

Declaration

public class DxChartAxisRange :
    DxSettingsComponent<ChartAxisRangeModel>

Remarks

The DxChartAxisRange object defines a range for an axis (argument or value). Use its StartValue and EndValue properties to specify a range.

In the following example, the data source contains sales data from 2017 to 2019. After the first render, the Chart shows data for 2018 only. To see the whole plot, users can scroll or drag the chart area. For a sample data source, refer to our GitHub repository.

@using Chart.Data

<DxChart Data="@dataSource">
    <DxChartLineSeries Name="Total Sales" ArgumentField="@((SaleInfo s) => s.Date)"
                       ValueField="@((SaleInfo s) => s.Amount)">
        <DxChartAggregationSettings Enabled="true"
                                    Method="ChartAggregationMethod.Sum" />
    </DxChartLineSeries>
    <DxChartArgumentAxis>
        <DxChartAxisRange StartValue="@(new DateTime(2018, 01, 01))" EndValue="@(new DateTime(2018, 12, 31))" />
    </DxChartArgumentAxis>
    <DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Pan" />
    <DxChartScrollBarSettings ArgumentAxisScrollBarVisible="true"
                              ArgumentAxisScrollBarPosition="ChartScrollBarPosition.Bottom" />
</DxChart>

@code {
    IEnumerable<SaleInfo> dataSource;

    protected override async Task OnInitializedAsync()
    {
        dataSource = await Sales.GetSalesAsync();
    }
}

using System;

public class SaleInfo {
    public int OrderId { get; set; }
    public string Region { get; set; }
    public string Country { get; set; }
    public string City { get; set; }
    public int Amount { get; set; }
    public DateTime Date { get; set; }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class Sales {
    static IList<SaleInfo> dataSource;
    static Sales() {
        CreateDataSource();
    }

    public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
        return Task.FromResult(dataSource.AsQueryable());
    }

    static void CreateDataSource() {
        dataSource = new List<SaleInfo> {
        // ...
            new SaleInfo {
                OrderId = 10541,
                Region = "South America",
                Country = "Brazil",
                City = "Rio de Janeiro",
                Amount = 5000,
                Date = DateTime.Parse("2018/02/01")
            },
            new SaleInfo {
                OrderId = 10542,
                Region = "South America",
                Country = "Argentina",
                City = "Buenos Aires",
                Amount = 1995,
                Date = DateTime.Parse("2018/02/20")
            },
            new SaleInfo {
                OrderId = 10543,
                Region = "South America",
                Country = "Paraguay",
                City = "Asuncion",
                Amount = 860,
                Date = DateTime.Parse("2018/02/12")
            },
            new SaleInfo {
                OrderId = 10544,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 2150,
                Date = DateTime.Parse("2018/02/10")
            },
            new SaleInfo {
                OrderId = 10545,
                Region = "Europe",
                Country = "Germany",
                City = "Berlin",
                Amount = 4050,
                Date = DateTime.Parse("2018/02/06")
            },
            // ...
    };
    }
}

Axis Range

Run Demo: Charts - Zoom and Pan

To create a Chart that displays a part of the data source’s items, use the Filter property. The latter allows you to increase Chart performance, since the client loads fewer data items.