Skip to main content

ChartScrollBarPosition Enum

Lists values that specify the scroll bar’s position.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

public enum ChartScrollBarPosition

Members

Name Description
Bottom

Places the scroll bar below the chart.

Left

Places the scroll bar to the left of the chart.

Right

Places the scroll bar to the right of the chart.

Top

Places the scroll bar above the chart.

Related API Members

The following properties accept/return ChartScrollBarPosition values:

Remarks

When the chart displays the argument axis horizontally, use the Top and Bottom values to specify the scroll bar 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 scroll bar position.

The code below does the following:

  • Enables zoom and pan.
  • Adds a scroll bar to the chart’s argument axis.
  • Sets the scroll bar’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" />
    </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();
    }
}

Scroll bar

Run Demo: Charts - Zoom and Pan

See Also