DxChartZoomAndPanSettings Class

Configures zoom and pan settings.

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

public class DxChartZoomAndPanSettings :
    DxSettingsComponent<ChartZoomAndPanSettingsModel>

Remarks

Users can zoom and pan the chart with the mouse wheel or touch gestures. To enable zoom/pan, add a DxChartZoomAndPanSettings object and specify its ArgumentAxisZoomAndPanMode and ValueAxisZoomAndPanMode properties. To disable mouse wheel or touch gestures, use the AllowMouseWheel / AllowTouchGestures properties.

You can also add a scroll bar that allows users to pan the chart along the argument axis. To do this, add a DxChartScrollBarSettings object and set its ArgumentAxisScrollBarVisible property to true. Use the ArgumentAxisScrollBarPosition property to specify the scroll bar’s position.

Index.razor
BagrainDataPoint.cs

    <DxChart T="BargainDataPoint"
                Data="@UsdJpyData"
                @key="@Params.ThemeName"
                CssClass="w-100">
        <DxChartLegend Position="RelativePosition.Inside"
                        VerticalAlignment="VerticalEdge.Top"
                        HorizontalAlignment="HorizontalAlignment.Right" />
        <DxChartLineSeries T="BargainDataPoint"
                            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="new DateTime(2020, 01, 01)"
                              EndValue="new DateTime(2021, 01, 29)" />
        </DxChartArgumentAxis>
        <DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both" />
        <DxChartScrollBarSettings ArgumentAxisScrollBarVisible="true" 
                                  ArgumentAxisScrollBarPosition="ChartScrollBarPosition.Bottom" />
        <DxChartTooltip Enabled="true" Position="RelativePosition.Outside">
            <div style="margin: 0.75rem">
                <div class="font-weight-bold">@(((DateTime)context.Point.Argument).ToString("d"))</div>
                <div>1$ = @(context.Point.Value)¥</div>
            </div>
        </DxChartTooltip>
    </DxChart>

    @code {
        IEnumerable<BargainDataPoint> UsdJpyData;
        @inject ICurrencyExchangeDataProvider UsdJpyDataProvider

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

public class BargainDataPoint {
    public DateTime DateTimeStamp { get; }
    public double Price { get; }

    public BargainDataPoint(DateTime dateTimeStamp, double price) {
        DateTimeStamp = dateTimeStamp;
        Price = price;
    }
}

Data Aggregation