DxChart<T>.VisualRangeChanged Event

Fires when the axis visual range changes.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[Parameter]
public EventCallback<ChartVisualRangeChangedEventArgs> VisualRangeChanged { get; set; }

Event Data

The VisualRangeChanged event's data class is ChartVisualRangeChangedEventArgs. The following properties provide information specific to this event:

Property	Description
AxisName	Returns the name of the value axis or `null` for the argument axis.
ChangeSource	Identifies an operation that triggered the event.
CurrentRange	Returns the new axis visual range.
IsArgumentAxis	Returns whether an argument or value axis is processed.
PreviousRange	Returns the previous axis visual range.

Remarks

Handle the VisualRangeChanged event to react to axis visual range changes. This event fires in the following cases:

Users zoom or pan the chart.
You apply specific visual ranges to axes using SetArgumentAxisVisualRange and SetValueAxisVisualRange methods.
You reset visual ranges for all axes using the ResetVisualRange method.

The event includes the following arguments:

PreviousRange | CurrentRangeReturn previous and current axis visual ranges.IsArgumentAxisIdentifies the axis (argument or value).AxisNameReturns the name of the value axis whose visual range changes. If you do not specify the value axis name in chart markup, the property returns the axis position. In the case of the argument axis, returns null.ChangeSourceIdentifies the operation that causes range changes (zoom/pan action or method call).

Example

The following code snippet shows information about visual range changes only when a user pans the chart along the value axis:

razor

@inject ICurrencyExchangeDataProvider UsdJpyDataProvider

<DxChart @ref="@chart"
         T="DatePricePoint"
         Data="@UsdJpyData"
         VisualRangeChanged="@OnVisualRangeChanged"
         Width="100%">
    <DxChartLineSeries T="DatePricePoint"
                       TArgument="DateTime"
                       TValue="double"
                       ArgumentField="i => i.DateTimeStamp"
                       ValueField="i => i.Price"
                       Name="USDJPY">
        <DxChartSeriesPoint Visible="false" />
        <DxChartAggregationSettings Enabled="true"
                                    Method="ChartAggregationMethod.Average" />
    </DxChartLineSeries>
    <DxChartArgumentAxis>
        <DxChartAxisRange StartValue="startDate"
                          EndValue="endDate" />
    </DxChartArgumentAxis>
    <DxChartZoomAndPanSettings ValueAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
                                ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"/>
    <DxChartScrollBarSettings ArgumentAxisScrollBarVisible="true"
                              ArgumentAxisScrollBarPosition="ChartScrollBarPosition.Bottom" />
</DxChart>

@code {
    IEnumerable<DatePricePoint> UsdJpyData;
    DxChart<DatePricePoint> chart;

    DateTime startDate = new DateTime(2020, 01, 01);
    DateTime endDate = new DateTime(2021, 01, 29);

    void OnVisualRangeChanged(ChartVisualRangeChangedEventArgs args) {
        if (!args.IsArgumentAxis && args.ChangeSource == ChartVisualRangeChangeSource.ZoomAction) {
            var previousRange = args.PreviousRange;
            var currentRange = args.CurrentRange;
            ShowDetailDialog(previousRange, currentRange);
        }
    }
    // ...

    protected override async Task OnInitializedAsync() {
        UsdJpyData = await UsdJpyDataProvider.GetDataAsync();
    }
}