Class ChartZoomSettings

Provides options to customize the zoom settings of the chart.

Inheritance
System.Object
ChartSubComponent
ChartZoomSettings
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class ChartZoomSettings : ChartSubComponent, ISubcomponentTracker

Constructors

ChartZoomSettings()

Declaration
public ChartZoomSettings()

Properties

AccessibilityDescriptionFormat

Gets or sets the format for the toolkit accessibility description of the ToolbarItems.

Declaration
public string AccessibilityDescriptionFormat { get; set; }
Property Value
Type Description
System.String

Accepts a string that defines the format for the toolkit accessibility description of the ToolbarItems. The default value is null.
Remarks

Use this property to specify a format for the toolkit accessibility description of the ToolbarItems. The placeholder ${value} can be used to set the accessibility text for the zoom toolkit toolbar item name. For example, the format "Selected the ${value} option" will read as "Selected the ZoomIn option" for the ZoomIn button.

Examples
// This example demonstrates how to configure the accessibility description format for the toolbar items in a chart's zoom settings.
<SfChart>
    <ChartZoomSettings ToolbarDisplayMode="ToolbarMode.Always" AccessibilityDescriptionFormat="Selected the ${value} option" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

AccessibilityRole

Gets or sets the accessibility role for the ChartZoomSettings chart zoom toolkit.

Declaration
public string AccessibilityRole { get; set; }
Property Value
Type Description
System.String

Accepts a string that defines the accessibility role for the ChartZoomSettings chart zoom toolkit. The default value is null.
Remarks

Use this property to provide an accessibility role for the ChartZoomSettings chart zoom toolkit.

Examples
// This example demonstrates how to configure the accessibility role for the toolbar items in a chart's zoom settings.
<SfChart>
    <ChartZoomSettings ToolbarDisplayMode="ToolbarMode.Always" AccessibilityRole="button" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

EnableDeferredZooming

Gets or sets a value indicating whether to update the chart with a delay while panning.

Declaration
public bool EnableDeferredZooming { get; set; }
Property Value
Type Description
System.Boolean

true if updating the chart with a delay while panning is enabled; otherwise, false. The default value is true.
Remarks

Enabling this option can provide a smoother user experience during panning by introducing a delay before the chart is updated.

Examples
// This example demonstrates how to enable selection zooming with deferred zooming in a chart.
<SfChart>
    <ChartZoomSettings EnableDeferredZooming="true" EnableSelectionZooming="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

EnableMouseWheelZooming

Gets or sets a value indicating whether the chart can be zoomed using the mouse wheel.

Declaration
public bool EnableMouseWheelZooming { get; set; }
Property Value
Type Description
System.Boolean

true if the chart can be zoomed using the mouse wheel; otherwise, false. The default value is false.
Remarks

Enabling this option allows users to zoom in or out on the chart by using the mouse wheel.

Examples
// This example demonstrates how to enable mouse wheel zooming in a chart.
<SfChart>
    <ChartZoomSettings EnableMouseWheelZooming="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

EnablePan

Gets or sets a value indicating whether the chart can be panned when zoomed.

Declaration
public bool EnablePan { get; set; }
Property Value
Type Description
System.Boolean

true if the chart can be panned when zoomed; otherwise, false. The default value is false.
Remarks

Enabling this option allows users to pan across the zoomed-in chart area for better exploration of specific regions.

Examples
// This example demonstrates how to enable pan functionality in a chart.
<SfChart>
    <ChartZoomSettings EnablePan="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

EnablePinchZooming

Gets or sets a value indicating whether the chart can be zoomed through pinch gestures on touch-enabled devices.

Declaration
public bool EnablePinchZooming { get; set; }
Property Value
Type Description
System.Boolean

true if the chart can be zoomed through pinch gestures; otherwise, false. The default value is false.
Remarks

Enabling this option allows users to zoom in or zoom out on the chart by performing pinch gestures on touch-enabled devices.

Examples
// This example demonstrates how to enable pinch zooming in a chart.
<SfChart>
    <ChartZoomSettings EnablePinchZooming="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

EnableScrollbar

Gets or sets a value indicating whether the axis should have a scrollbar when zoomed.

Declaration
public bool EnableScrollbar { get; set; }
Property Value
Type Description
System.Boolean

true if the axis should have a scrollbar when zoomed; otherwise, false. The default value is false.
Remarks

Enabling this option allows users to navigate and visualize specific regions of the chart using scrollbar when zoomed.

Examples
// This example demonstrates how to enable the scrollbar in a chart.
<SfChart>
    <ChartZoomSettings EnableScrollbar="true" ToolbarDisplayMode="ToolbarMode.Always" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

EnableSelectionZooming

Gets or sets a value indicating whether the chart can be zoomed by selecting a rectangular region on the plot area.

Declaration
public bool EnableSelectionZooming { get; set; }
Property Value
Type Description
System.Boolean

true if the chart can be zoomed by selecting a rectangular region on the plot area; otherwise, false. The default value is false.
Remarks

Enabling this option provides an interactive way for users to focus on specific areas of interest within the chart.

Examples
// This example demonstrates how to enable selection zooming in a chart.
<SfChart>
    <ChartZoomSettings EnableSelectionZooming="true" ToolbarDisplayMode="ToolbarMode.Always" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Focusable

Gets or sets the accessibility keyboard navigation options for the ChartZoomSettings chart zoom toolkit.

Declaration
public bool Focusable { get; set; }
Property Value
Type Description
System.Boolean

Accepts the boolean value to enable or disable the keyboard navigation for the ChartZoomSettings chart zoom toolkit. The default value is true.
Remarks

Use this property to toggle the keyboard navigation focus for the ChartZoomSettings chart zoom toolkit.

Examples
// This example demonstrates how to configure zoom settings to be focusable in the chart.
<SfChart>
    <ChartZoomSettings ToolbarDisplayMode="ToolbarMode.Always" Focusable="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Mode

Gets or sets the mode of zooming.

Declaration
public ZoomMode Mode { get; set; }
Property Value
Type Description
ZoomMode

One of the ZoomMode enumeration that specifies the mode of zooming. The options include:

  • XY: Chart can be zoomed both vertically and horizontally.
  • X: Chart can be zoomed horizontally.
  • Y: Chart can be zoomed vertically.
    The default mode is ZoomMode.XY.
Remarks

This property can be set to allow zooming both vertically and horizontally, only horizontally, or only vertically.

Examples
// This example demonstrates how to enable zooming only along the Y-axis in a chart.
<SfChart>
    <ChartZoomSettings Mode="ZoomMode.Y" ToolbarDisplayMode="ToolbarMode.Always" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

ToolbarDisplayMode

Gets or sets the visibility mode for the zooming toolbar in the chart.

Declaration
public ToolbarMode ToolbarDisplayMode { get; set; }
Property Value
Type Description
ToolbarMode

One of the ToolbarMode enumeration that specifies the visibility mode for the zooming toolbar. The options include:

  • OnDemand: The zooming toolbar is only visible while the chart has zoomed.
  • Always: The zooming toolbar is always visible even though the chart has not zoomed.
  • None: The zooming toolbar will not be visible even though the chart is zoomed.
    The default value is ToolbarMode.OnDemand.
Remarks

It determines whether the toolbar should be visible only when the chart is zoomed, always visible, or never visible.

Examples
// This example demonstrates how to display the zoom toolbar always in a chart.
<SfChart>
    <ChartZoomSettings ToolbarDisplayMode="ToolbarMode.Always" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

ToolbarItems

Gets or sets the list of items to be added in the toolbar for the chart.

Declaration
public List<ToolbarItems> ToolbarItems { get; set; }
Property Value
Type Description
System.Collections.Generic.List<ToolbarItems>

The list of ToolbarItems to be displayed in the chart toolbar. The available items include:

  • Zoom
  • ZoomIn
  • ZoomOut
  • Pan
  • Reset
Remarks

The ToolbarItems property allows customization of the items displayed in the chart toolbar. Users can choose from a set of predefined items, such as Zoom, ZoomIn, ZoomOut, Pan, and Reset, to be included in the toolbar.

Examples
// This example demonstrates how to configure specific toolbar items in a chart's zoom settings.
<SfChart>
    <ChartZoomSettings ToolbarDisplayMode="ToolbarMode.Always"
                       ToolbarItems="new List<ToolbarItems>() { ToolbarItems.Zoom, ToolbarItems.Reset, ToolbarItems.Pan }" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>