Skip to main content

Scale Breaks

  • 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.

ScaleBreaks

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

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

<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.

ScaleBreaks_Edges

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

<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:

ScaleBreaks_appearance

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.

<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.