ChartVisualRangeChangedEventArgs Class

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class ChartVisualRangeChangedEventArgs :
    EventArgs

Remarks

Handle the VisualRangeChanged event to react to axis visual range changes. 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 changed. 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 triggered the event (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();
    }
}