Class ChartCommonScrollbarSettings

Provides options to customize the scrollbar of the axis.

Inheritance

System.Object

ChartSubComponent

ChartCommonScrollbarSettings

ChartAxisScrollbarSettings

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartCommonScrollbarSettings : ChartSubComponent, ISubcomponentTracker

Constructors

ChartCommonScrollbarSettings()

Declaration

public ChartCommonScrollbarSettings()

Properties

Enable

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

Declaration

public bool Enable { get; set; }

Property Value

Type	Description
System.Boolean	`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

public bool EnableZoom { get; set; }

Property Value

Type	Description
System.Boolean	`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

public string GripColor { get; set; }

Property Value

Type	Description
System.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

public double Height { get; set; }

Property Value

Type	Description
System.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

public double PointsLength { get; set; }

Property Value

Type	Description
System.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

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

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

public string ScrollbarColor { get; set; }

Property Value

Type	Description
System.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

public double ScrollbarRadius { get; set; }

Property Value

Type	Description
System.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

public string TrackColor { get; set; }

Property Value

Type	Description
System.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

public double TrackRadius { get; set; }

Property Value

Type	Description
System.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>