Skip to main content
All docs
V25.1
  • DxChart<T>.VisualRangeChanged Event

    Fires when the axis visual range changes.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [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:

    The event includes the following arguments:

    PreviousRange | CurrentRange
    Return previous and current axis visual ranges.
    IsArgumentAxis
    Identifies the axis (argument or value).
    AxisName
    Returns 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.
    ChangeSource
    Identifies 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:

    @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();
        }
    }
    
    See Also