[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Collapse]Chart Control
   [Expand]Product Information
   [Expand]Getting Started
    [Expand]Creating Charts
    [Collapse]Chart Elements
       Axes Overview
       Axis Scale Types
       Visual Ranges and Whole Ranges
       Primary and Secondary Axes
       Grid Lines,Tickmarks and Interlacing
       Axis Appearance and Position
       Axis Titles
       Axis Labels
       Constant Lines
       Scale Breaks
     [Expand]Chart Titles
    [Expand]End-User Interaction
     Supported Browsers
     Adding a Web Chart
     Handling Client-side Scripts
     Medium Trust Support
     Web Farm and Web Gardens Support
   [Expand]Design-Time Features
   [Expand]Visual Elements
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Scale Breaks

This document describes how an axis (as well as the diagram to which it belongs) can be broken into multiple scale ranges, separated by the so-called scale breaks. Before you proceed with this document, you may wish to review the basics of using axes.

This document consists of the following sections.

Expanded Scale Breaks Overview

A scale break is an area across an axis which is shown in place of a section of the axis' range. It appears across the original axis as a ragged (or wavy or straight, depending on the desired appearance) line.

The most common reason for using scale breaks is when a chart has useless space. This happens when the chart's series represent data with great leaps in range. For example, when a series represents a continuous flow of values in both decimals and thousands, by default. This data does not provide any useful information, since neither series point has any value within this range, and the leap has no points. So, it is natural to replace these empty ranges with ragged lines - scale breaks.


Scale breaks are supported for all series views that are compatible with the XY-Diagram.

You can add multiple scale breaks to an axis of any scale type, whether or not this axis uses a logarithmic scale.

When you add scale breaks, it does not matter whether their ranges intersect, or exceed the visible axis range. The ASP.NET Chart Control will automatically merge intersecting scale breaks, and adjust the axis range. Scale breaks depend on the settings of axis scale elements, for example, axis' grid lines, tickmarks, as well as the axis labels.

With the WebChartControl, you have the capability to use either automatic or manual scale breaks, or both. These approaches are highlighted below in the corresponding topic sections.

Expanded Auto Scale Breaks

You can force the WebChartControl to automatically insert scale breaks into an axis via the Axis.AutoScaleBreaks property. To do this at design time, locate an axis in the Properties window, expand the Axis.AutoScaleBreaks property, and set the AutoScaleBreaks.Enabled property to true.

Then, if your chart's data suggests using scale breaks, they will be created automatically.

You can limit the maximum number of automatic scale breaks, via the AutoScaleBreaks.MaxCount property, whose minimum value is 1.

Note that auto-calculated scale breaks and manually added scale breaks can co-exist in the ScaleBreakCollection.

For more inforation, refer to How to: Enable Automatic Scale Breaks for an Axis.

Expanded Insert a Scale Break Manually

Apart from automatic scale breaks, you have the capability to manually assign scale breaks to an axis.

A scale break is represented by an instance of the ScaleBreak class, which resides in the ScaleBreakCollection of an axis.

To access this collection at design time, locate an axis in the Properties window, and click the ellipsis button of the Axis.ScaleBreaks property.

This invokes the Scale Break Collection Editor.

After a scale break is added to the collection, define the range which a scale break represents. The limits of that range are determined by two properties: the ScaleBreak.Edge1 and ScaleBreak.Edge2 properties.

The values of these properties should be defined in measurement units appropriate for the axis scale type.


It does not matter whether the value of the ScaleBreak.Edge1 property is less or greater than the value of the ScaleBreak.Edge2 property. It is only important that their values are different, because if the values of these properties are equal, a scale break is considered invisible.

To define a custom name for a scale break, use its ChartElementNamed.Name property.

For more information, refer to How to: Manually Insert a Scale Break into an Axis or How to: Manually Insert a Scale Break into an Axis (Runtime Sample).

Expanded Customize Scale Breaks' Appearance

To define the overall appearance for both automatic and manual scale breaks, use the Axis.ScaleBreakOptions property.

This property provides access to the following options:

Is this topic helpful?​​​​​​​