blazor-devexpress-dot-blazor-dot-dxchart-1-2ccc6ba7.md
Resets visual ranges for all axes to match the data range.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public void ResetVisualRange()
The <DxChart> component automatically adjusts axis visual ranges to display all data source values.
You can modify the axis visual range as follows:
Call the ResetVisualRange method to reset visual ranges for all axes to automatically calculated values (matching the data range).
To react to axis visual range changes, handle the VisualRangeChanged event.
The following code snippet displays a custom Reset Zoom button that resets visual ranges for both argument and value axes:
<DxChart @ref="@chart"
Data="@DataSource"
Width="100%">
<DxChartTitle Text="Life Expectancy vs. Birth Rate"/>
@* ... *@
<DxChartScatterSeries ArgumentField="@((BirthLife i) => i.LifeExp)"
ValueField="@((BirthLife i) => i.BirthRate)"
Filter="@((BirthLife i) => i.Year == 1970)"
Name="1970">
<DxChartSeriesPoint Size="8"/>
</DxChartScatterSeries>
<DxChartScatterSeries ArgumentField="@((BirthLife i) => i.LifeExp)"
ValueField="@((BirthLife i) => i.BirthRate)"
Filter="@((BirthLife i) => i.Year == 2010)"
Name="2010">
<DxChartSeriesPoint Size="8"/>
</DxChartScatterSeries>
<DxChartArgumentAxis>
<DxChartAxisTitle Text="Life Expectancy"/>
</DxChartArgumentAxis>
<DxChartValueAxis>
<DxChartAxisTitle Text="Birth Rate"/>
</DxChartValueAxis>
<DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
ValueAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
AllowDragToZoom="true"
AllowMouseWheel="true"
PanKey="ChartEventPanKey.Shift"/>
</DxChart>
<DxButton Text="Reset Zoom" Click="@ResetVisualRange"/>
@code {
IEnumerable<BirthLife> DataSource = Enumerable.Empty<BirthLife>();
DxChart<BirthLife> chart;
protected override void OnInitialized() {
DataSource = ChartBirthLifeDataProvider.GenerateData();
}
public void ResetVisualRange() {
chart.ResetVisualRange();
}
}
See Also