DxChartAxisRange Class
Specifies the visible range for the chart’s axes.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v23.2.dll
NuGet Package: DevExpress.Blazor
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();
}
}
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.