Class ChartCommonScrollbarSettings

Provides options to customize the scrollbar of the axis.

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

ChartSubComponent

ChartCommonScrollbarSettings

ChartAxisScrollbarSettings

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.BuildRenderTree(RenderTreeBuilder)

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnAfterRenderAsync(bool)

ComponentBase.OnInitialized()

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.Dispose(bool)

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartCommonScrollbarSettings : ChartSubComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Constructors

ChartCommonScrollbarSettings()

Declaration

public ChartCommonScrollbarSettings()

Properties

Enable

Gets or sets a value indicating whether the scrollbar is enabled.

Declaration

[Parameter]
public bool Enable { get; set; }

Property Value

Type	Description
bool	`true` to enable the scrollbar; otherwise, `false`. The default value is `false`.

Remarks

If set to true, the axis will be rendered with a scrollbar.

Examples

// This example demonstrates how to enable and configure the scrollbar on the primary X-axis of a chart.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartAxisScrollbarSettings Enable="true" PointsLength="30" />
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@dataSource" XName="x" YName="y" />
    </ChartSeriesCollection>
</SfChart>

EnableZoom

Gets or sets the visibility of the arrow at the end of the scrollbar, which allows zooming using the scrollbar.

Declaration

[Parameter]
public bool EnableZoom { get; set; }

Property Value

Type	Description
bool	`true` to display the arrows in the scrollbar for zooming; otherwise, `false`. The default value is `true`.

Remarks

Use this property to show or hide the arrows at the end of the scrollbar, which enable zooming functionality.

Examples

<SfChart> 
    <ChartPrimaryXAxis Title="X-Axis"> 
        <ChartAxisScrollbarSettings EnableZoom="false" /> 
    </ChartPrimaryXAxis> 
</SfChart>

GripColor

Gets or sets the fill color of the scrollbar rifles.

Declaration

[Parameter]
public string GripColor { get; set; }

Property Value

Type	Description
string	A `string` that specifies the color of the scrollbar rifles. The default value is an empty string.

Remarks

Use this property to customize the fill color of the rifles in the scrollbar on the axis.

Examples

<SfChart> 
    <ChartPrimaryXAxis Title="X-Axis"> 
        <ChartAxisScrollbarSettings GripColor="green" /> 
    </ChartPrimaryXAxis> 
</SfChart>

Height

Gets or sets the height of the scrollbar.

Declaration

[Parameter]
public double Height { get; set; }

Property Value

Type	Description
double	A `double` value that defines the height of the scrollbar. The default value is `16`.

Remarks

Use this property to customize the height of the scrollbar on the axis.

Examples

<SfChart> 
    <ChartPrimaryXAxis Title="X-Axis"> 
        <ChartAxisScrollbarSettings Height="16" /> 
    </ChartPrimaryXAxis> 
</SfChart>

PointsLength

Gets or sets the length of the points for numeric and logarithmic values.

Declaration

[Parameter]
public double PointsLength { get; set; }

Property Value

Type	Description
double	A double value representing the length of the points.

Remarks

At a time either this PointsLength or ChartAxisScrollbarSettingsRange is applicable.

Examples

// This example demonstrates how to set the points length for the scrollbar on the primary X-axis of a chart.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartAxisScrollbarSettings Enable="true" PointsLength="30" />
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@dataSource" XName="x" YName="y" />
    </ChartSeriesCollection>
</SfChart>

Position

Gets or sets the position of the scrollbar in the chart.

Available options include:

Top: Positions the scrollbar at the top of the chart. Applicable only to horizontal scrollbars.
Bottom: Positions the scrollbar at the bottom of the chart. Applicable only to horizontal scrollbars.
Left: Positions the scrollbar on the left side of the chart. Applicable only to vertical scrollbars.
Right: Positions the scrollbar on the right side of the chart. Applicable only to vertical scrollbars.
PlaceNextToAxisLine: Positions the scrollbar next to the axis line.

Declaration

[Parameter]
[JsonConverter(typeof(JsonStringEnumConverter))]
public ScrollbarPosition Position { get; set; }

Property Value

Type	Description
ScrollbarPosition	The default value is `PlaceNextToAxisLine`.

Remarks

Use this property to change the position of the scrollbar in the chart to suit your desired layout.

Examples

<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisScrollbarSettings Enable="true" Position="ScrollbarPosition.Bottom">
        </ChartAxisScrollbarSettings>
    </ChartPrimaryXAxis>
</SfChart>

Range

Gets or sets an instance of ChartAxisScrollbarSettingsRange which controls the customization of the scrollbar range.

Declaration

[Parameter]
public ChartAxisScrollbarSettingsRange Range { get; set; }

Property Value

Type	Description
ChartAxisScrollbarSettingsRange	An instance of ChartAxisScrollbarSettingsRange.

Remarks

At a time either this Range or PointsLength is applicable.

Examples

// This example demonstrates how to set the range for the scrollbar on the primary X-axis of a chart.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartAxisScrollbarSettings Enable="true" Range="@settingsRange" />
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@dataSource" XName="x" YName="y" />
    </ChartSeriesCollection>
</SfChart>

ScrollbarColor

Gets or sets the fill color of the scrollbar.

Declaration

[Parameter]
public string ScrollbarColor { get; set; }

Property Value

Type	Description
string	A `string` that specifies the fill color of the scrollbar. The default value is an empty string.

Remarks

Use this property to customize the fill color of the scrollbar on the axis.

Examples

<SfChart> 
    <ChartPrimaryXAxis Title="X-Axis"> 
        <ChartAxisScrollbarSettings ScrollbarColor="yellow" /> 
    </ChartPrimaryXAxis> 
</SfChart>

ScrollbarRadius

Gets or sets the corner radius of the scrollbar border.

Declaration

[Parameter]
public double ScrollbarRadius { get; set; }

Property Value

Type	Description
double	A `double` value that specifies the corner radius of the scrollbar border. The default value is `0`.

Remarks

Use this property to customize the corner radius of the scrollbar border on the axis.

Examples

<SfChart> 
    <ChartPrimaryXAxis Title="X-Axis"> 
        <ChartAxisScrollbarSettings ScrollbarRadius="14" /> 
    </ChartPrimaryXAxis> 
</SfChart>

TrackColor

Gets or sets the color of the scrollbar track.

Declaration

[Parameter]
public string TrackColor { get; set; }

Property Value

Type	Description
string	A `string` that specifies the color of the scrollbar track. The default value is an empty string.

Remarks

Use this property to customize the color of the scrollbar track on the axis.

Examples

<SfChart> 
    <ChartPrimaryXAxis Title="X-Axis"> 
        <ChartAxisScrollbarSettings TrackColor="red" /> 
    </ChartPrimaryXAxis> 
</SfChart>

TrackRadius

Gets or sets the corner radius of the scrollbar track.

Declaration

[Parameter]
public double TrackRadius { get; set; }

Property Value

Type	Description
double	A `double` value that specifies the corner radius of the scrollbar track. The default value is `0`.

Remarks

Use this property to customize the corner radius of the scrollbar track on the axis.

Examples

<SfChart> 
    <ChartPrimaryXAxis Title="X-Axis"> 
        <ChartAxisScrollbarSettings TrackRadius="14" /> 
    </ChartPrimaryXAxis> 
</SfChart>

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable