Skip to main content

ChartScrollBarPosition Enum

Lists values that specify the scrollbar’s position.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor


public enum ChartScrollBarPosition


Name Description

Places the scrollbar below the chart.


Places the scrollbar to the left of the chart.


Places the scrollbar to the right of the chart.


Places the scrollbar above the chart.

Related API Members

The following properties accept/return ChartScrollBarPosition values:


When the chart displays the argument axis horizontally, use the Top and Bottom values to specify the scrollbar position.

If you set the DxChart.Rotated property to true, the chart displays the argument axis vertically. In this case, use the Right and Left values to specify the scrollbar position.

The code below does the following:

  • Enables zoom and pan.
  • Adds a scrollbar to the chart’s argument axis.
  • Sets the scrollbar’s position to Top.
@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" />
    <DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
                               ValueAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Pan" />
    <DxChartScrollBarSettings ArgumentAxisScrollBarVisible="true"
                              ArgumentAxisScrollBarPosition="ChartScrollBarPosition.Top" />

@code {
    IEnumerable<SaleInfo> SalesData;

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


Run Demo: Charts - Zoom and Pan

See Also