Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxChartScrollBarSettings Class

Specifies settings for the chart’s scrollbar.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxChartScrollBarSettings :
    DxSettingsComponent<ChartScrollBarSettingsModel>

#Remarks

The DxChart<T> component allows you to add a scrollbar for the argument axis. Users can use the scrollbar to pan the chart.

Follow the steps below to add a scrollbar to the chart:

  1. Enable zoom and pan. Add a DxChartZoomAndPanSettings object and specify its ArgumentAxisZoomAndPanMode and ValueAxisZoomAndPanMode properties.
  2. Add a DxChartScrollBarSettings object and set its ArgumentAxisScrollBarVisible property to true. You can also specify the ArgumentAxisScrollBarPosition property.
@using Chart.Data

<DxChart Data="@SalesData">
    <DxChartLineSeries Name="2017"
                        Filter="@((SaleInfo s) => s.Date.Year == 2017)"
                        ArgumentField="@(s => s.Date)"
                        ValueField="@(s => s.Amount)">
        <DxChartAggregationSettings Enabled="true" Method="ChartAggregationMethod.Sum" />
    </DxChartLineSeries>
    <DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
                               ValueAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Pan" />
    <DxChartScrollBarSettings ArgumentAxisScrollBarVisible="true"
                              ArgumentAxisScrollBarPosition="ChartScrollBarPosition.Top" />
</DxChart>

@code {
    IEnumerable<SaleInfo> SalesData;

    protected override async Task OnInitializedAsync() {
        SalesData = await Sales.GetSalesAsync();
    }
}

scrollbar

Run Demo: Charts - Zoom and Pan

For more information about zoom and scroll in Blazor Chart, refer to the following topic: Zoom in Blazor Chart.

#Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.Internal.ChartScrollBarSettingsModel>
DxChartScrollBarSettings
See Also