Skip to main content

DxChartAxisRange Class

Specifies the visible range for the chart’s axes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.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();
    }
}

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.

Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.Internal.ChartAxisRangeModel>
DxChartAxisRange
See Also