DxChartZoomAndPanSettings Class

Configures zoom and pan settings.

Assembly: DevExpress.Blazor.v23.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