Scale Breaks

May 28, 2021
3 minutes to read

The Chart control enables you to create scale breaks along an axis both manually and automatically. Use scale breaks to skip data ranges from a Cartesian diagram’s x- and y-axis scales.

Note

At present, scale breaks can’t work simultaneously with Zooming and Scrolling (2D XY-Charts). Scrolling has the higher priority. So, in a situation when both scale breaks and scrolling are enabled for any axis of the same diagram, scale breaks will be disabled, while scrolling will persist.

This document consists of the following ‘how-to’ sections:

How to Generate Scale Breaks Automatically
How to Create Scale Breaks Manually
How to Customize Scale Breaks’ Appearance

How to Generate Scale Breaks Automatically

The Chart control can automatically insert scale breaks into an axis. Use the following code to auto-create y-axis’ scale breaks:

XAML

xaml

<dxc:XYDiagram2D>
    <dxc:XYDiagram2D.AxisY>
        <dxc:AxisY2D>
            <dxc:AxisY2D.AutoScaleBreaks>
                <dxc:AutoScaleBreaks Enabled="True" 
                                     MaxCount="3"/>
            </dxc:AxisY2D.AutoScaleBreaks>
        </dxc:AxisY2D>
    </dxc:XYDiagram2D.AxisY>
    <!-- Other diagram's settings. -->
</dxc:XYDiagram2D>

Use the following classes and properties to enable auto-generating scale breaks:

Class or Property	Description
Axis2D.AutoScaleBreaks	Gets or sets automatic scale breaks.
AutoScaleBreaks	The storage of automatic scale breaks’ settings.
AutoScaleBreaks.Enabled	Specifies whether auto-creating of scale breaks is enabled.
AutoScaleBreaks.MaxCount	Limits a maximum possible number of auto-generated scale breaks.

How to Create Scale Breaks Manually

In addition to automatic scale breaks, you can manually add scale breaks to a chart. For this, populate the Axis2D.ScaleBreaks collection with the ScaleBreak objects and limit each scale break by two edges in axis measurement units. Note that it does not matter in which order scale break edges are defined.

The following code shows how to specify two horizontal scale breaks:

XAML

xaml

<dxc:XYDiagram2D>
    <dxc:XYDiagram2D.AxisY>
        <dxc:AxisY2D>
            <dxc:AxisY2D.ScaleBreaks>
                 <dxc:ScaleBreak Edge1="250" 
                                 Edge2="1200"/>
                 <dxc:ScaleBreak Edge1="1400" 
                                 Edge2="2000"/>                          
            </dxc:AxisY2D.ScaleBreaks>
        </dxc:AxisY2D>
    </dxc:XYDiagram2D.AxisY>
    <!-- Other diagram's settings. -->
</dxc:XYDiagram2D>

Use the following API members to create scale breaks manually:

Class or Property	Description
Axis2D.ScaleBreaks	The collection of scale breaks that are added manually.
ScaleBreak	An individual scale break.
ScaleBreak.Edge1	Specifies a scale break’s first edge. This value should be specified in an appropriate axis’s measurement units.
ScaleBreak.Edge2	Specifies a scale break’s second edge. This value should be specified in an appropriate axis’s measurement units.

How to Customize Scale Breaks’ Appearance

You can modify the appearance of scale breaks (both manual and automatic) in different ways, for example, as the following image shows:

The markup below demonstrates how to change the distance between scale breaks’ edges, their thickness, style, and color. Note that ScaleBreakOptions equally affect both manual and automatic scale breaks’ appearance.

XAML

xaml

<dxc:XYDiagram2D>
    <dxc:XYDiagram2D.AxisY>
        <dxc:AxisY2D>
            <dxc:AxisY2D.ScaleBreaks>
                 <dxc:ScaleBreak Edge1="21000" 
                                 Edge2="37000"/>
                 <dxc:ScaleBreak Edge1="45000" 
                                 Edge2="85000"/>                      
            </dxc:AxisY2D.ScaleBreaks>
            <dxc:AxisY2D.ScaleBreakOptions>
                <dxc:ScaleBreakOptions SizeInPixels="15"
                               Style="Waved" 
                               Brush="Gray">
                    <dxc:ScaleBreakOptions.LineStyle>
                        <dxc:LineStyle Thickness="2"/>
                    </dxc:ScaleBreakOptions.LineStyle>
                </dxc:ScaleBreakOptions>
            </dxc:AxisY2D.ScaleBreakOptions>
        </dxc:AxisY2D>
    </dxc:XYDiagram2D.AxisY>
    <!-- Other diagram's settings. -->
</dxc:XYDiagram2D>

The following table lists classes and properties that are used to customize scale breaks’ appearance.

Class or Property	Description
Axis2D.ScaleBreakOptions	Gets or set the appearance settings of the axis scale breaks.
ScaleBreakOptions	Scale break appearance settings storage.
ScaleBreakOptions.SizeInPixels	Specifies the distance between scale break edges.
ScaleBreakOptions.Style	Gets or sets the appearance of scale breaks’ edges.
ScaleBreakOptions.Brush	Specifies the brush to draw the scale break edges.
ScaleBreakOptions.LineStyle	Gets or sets the style of the line that is used to draw a scale break.
LineStyle	Line settings storage.